Chapter 14. Animation
This chapter covers
- Getting started with SPA animations
- Adding CSS transition animations to your Aurelia applications
Good animations are subtle. They’re the kind of thing that users appreciate, often without even realizing that they’re present. Applications that use animations well feel fast, fluid, and polished. When you learn how to use Aurelia’s animation framework, you’ll be able to give users a high-quality experience that they’ll associate with your application. The Aurelia core team have built animation hooks into key points of the framework, such as route transitions.
When it comes to animating websites, there are two main approaches: CSS transitions and JavaScript animations. Aurelia makes it easy to use either approach in your project; they both have their merits and are suited to different scenarios. In this chapter, we’ll review the animation hooks provided by the framework and look at how you can use them with one of the supported Aurelia animation plugins: the animator-css plugin. This plugin allows you to animate pieces of your application with CSS transitions. We’ll also cover the pros and cons of the JavaScript- and CSS-based animation approaches to give you a guideline for what will fit best with your project requirements.