An Overview of Animations in Ionic Apps
In a highly polished mobile application, there are typically many short transitions and animations. To get you started, Ionic comes with several built-in animations, such as transitions between pages, modal page transitions, reactions to clicks, etc. But sooner or later you'll want to give your application a more unique identity by customizing existing animations and adding additional ones.
Since Ionic applications are hybrid applications, much of this can be accomplished by using CSS just like on web pages. The recently released Ionic Animations can be used when that's not enough. Built-in page transitions can also be customized although that's not documented very well.
As I was learning about animation in Ionic, I created a sample application to try out different approaches. The following video showcases them:
Here's a list of all the animations, in the order of appearance:
A staggering animation for the list items as they are loaded. That is, the animation is the same for all the items in the list. But for each item, it starts with a slightly larger delay than for the previous one. The effect is achieved by assigning the correct delay for each item to a CSS variable that is then used in the CSS style.
The fade-out animation for the list is also customized for each item in the list. However, this time the animation depends on the current scroll position of the list so that it always appears to spread out from the middle of the screen. The animation parameters are again set as CSS variables but they are calculated when the user clicks on an item instead of in advance.
A custom transition animation for page navigation replaces the default one that's built into Ionic.
The photos on the Detail page simply fade-in with increasing opacity. The important part here is the blurred image that's shown before the photos load. It uses Wolt's BlurHash that can be described with a short string and efficiently decoded in the application.
The transition animation for the modal page transforms the underlying page and gives the illusion of reusing one of its elements on the modal page. Only a small final part of this animation is implemented as a custom modal transition animation. The rest is an Ionic animation inside the underlying page following the FLIP principle to make it more performant.
In the interest of performance, all animations are based on changing the transform and opacity properties so that only the final (compositing) step of page rendering is required.
Each animation in the list links to a separate blog post in which I describe the approach in more detail.
The full source code for the sample application featured in the video above is available in a Bitbucket repository.
