Ionic Animations

Animations in applications

Most modern web and mobile applications use animation in some form, whether a simple sliding carousel, animated modal windows, or full-blown parallax scrolling.

Used wisely, such animation can enhance the user experience, adding a level of interactivity that delights and engages. If implemented poorly, the user experience suffers and app performance can very quickly degrade, particularly on older devices and even modern devices where heavy amounts of animation are triggered.

The importance of using technology wisely cannot be understated, particularly when it comes to animations. There’s nothing that kills the user experience faster than an app that’s so “busy” it becomes unusable.

In previous versions of Ionic, we would likely have made use of the Angular Animations package to implement custom animations within our applications. Since Ionic 5, we are now able to make use of the default Animations API.

Ionic Animations

As of Ionic v5, developers have access to the in-built Ionic Animations API, which provides many benefits:

• Platform agnostic: Can be used with any front-end framework or plain vanilla JavaScript
• No dependencies: Unlike many animation libraries, no external dependencies are required
• Highly optimized: Makes use of Web Animation API, which offloads process-intensive tasks to the browser
• CSS animation fallbacks: For browsers that don’t natively support the Web Animation API, CSS animations are used by default
• Simple API: Well documented, intuitive, and provides the ability to chain methods to form more complex animations

Fortunately, platform support for the Ionic Animations API is quite strong too: