This is going to be a very quick tutorial that will run through setting up Animate.css in an Ionic Angular application and adding a few different types of animations. Here’s what it will look like when we’re done with our app built with ionic framework (ionic 4, ionic 5):
Getting Started
Before you go through this tutorial, you should have at least a basic understanding of Ionic Angular.
If you’re not familiar with Ionic Framework already, I’d recommend reading my How to install Ionic first for set up and running and understand the basic concepts.
1. Install Animate.css
I will assume that you already have an Ionic project created that you want to set up Animate.css – we will be walking through an example of adding animation to an ion-card Component, but you can use these animations wherever you like on ion icon, ion label etc.
To begin, we are going to install the Animate.css library using npm. Just run the following command:
$ npm install animate.css --save
Now you can use Animate.css anywhere you like in your project by importing it to src/global.scss like this:
@import "~animate.css/animate.css";
2. Set up the Template
Now we are adding some cards using ion-card that will later animate when we add specific animation to them.
Modify src/pages/home/home.html to reflect the following:
The provided delays are from 1 to 5 seconds. You can customize them setting the --animate-delay property to a longer or a shorter duration:
/* All delay classes will take 2x longer to start */
:root {
--animate-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--animate-delay: 0.5s;
}
Repeating classes
You can control the iteration count of the animation by adding these classes, like below:
As with the delay and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them by setting the --animate-repeat property to a longer or a shorter value:
/* The element will repeat the animation 2x
It's better to set this property locally and not globally or
you might end up with a messy situation */
.my-element {
--animate-repeat: 2;
}
Summary
Getting Animation set up in your Ionic Framework applications with Animate.css only takes a matter of minutes, but it is also an in-depth library with plenty of advanced customisations.
1 thought on “How to Add Animate.css to Ionic Application.”
thanks a lot for saving my time 🙂