Animations and motion play an important role in user experience and have become a staple in modern applications. Their applications range from creating a more engaging experience for your users to serving as a means to communicate more effectively. There is no doubt about the importance of animations, however, building complex and efficient animations can be a challenging task. We have to account for factors such as the hardware the application is running on, the browsers your users use, the limitations of the frameworks or libraries you’re using, etc.

This tutorial will go through examples of how you can use Ionic Animations to spice up your React application. We will use both Ionic’s Animations and Gestures APIs to create the following interaction.

Part 1 of this tutorial focuses on creating the animations above using Ionic’s Animations APIs. Gestures and combining gestures with animations will be covered in part 2 of the tutorial.