How to Add Animate.css to Ionic Application.

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:

<ion-header>
  <ion-toolbar>
    <ion-title>
     Animated Cards
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-card>
      <ion-card-header>
        Product 1
      </ion-card-header>
      <ion-card-content>
        <ion-row>
      <ion-col>
        <ion-img src="../../assets/product1.png"></ion-img>
      </ion-col>
      <ion-col size="8">
        <ion-row> An Awesome Product</ion-row>
        <ion-row class="item-info"> {{ price }} </ion-row>
      </ion-col>
      <ion-col size="2">
        <div class="ion-text-right">
           <ion-icon name="heart-outline"></ion-icon>
        </div>
      </ion-col>
    </ion-row>
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        Product 2
      </ion-card-header>
      <ion-card-content>
        <ion-row>
      <ion-col>
        <ion-img src="../../assets/product2.png"></ion-img>
      </ion-col>
      <ion-col size="8">
        <ion-row> An Awesome Product</ion-row>
        <ion-row class="item-info"> {{ price }} </ion-row>
      </ion-col>
      <ion-col size="2">
        <div class="ion-text-right">
           <ion-icon name="heart-outline"></ion-icon>
        </div>
      </ion-col>
    </ion-row>
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        Product 3
      </ion-card-header>
      <ion-card-content>
        <ion-row>
      <ion-col>
        <ion-img src="../../assets/product3.png"></ion-img>
      </ion-col>
      <ion-col size="8">
        <ion-row> An Awesome Product</ion-row>
        <ion-row class="item-info"> {{ price }} </ion-row>
      </ion-col>
      <ion-col size="2">
        <div class="ion-text-right">
           <ion-icon name="heart-outline"></ion-icon>
        </div>
      </ion-col>
    </ion-row>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

2. Adding animation to cards

Now we all ready to animate our cards.

Add the class animate__animated to our cards, along with any of the animation names (don’t forget the animate__ prefix!):

Add following classes to our cards respectively in src/pages/home/home.html (You can add animation which you like)

class="animate__animated animate__flipInX"
class="animate__animated animate__zoomInUp"
class="animate__animated animate__lightSpeedInRight"

Now our cards animate according to the classes added to them.

3. Utility classes

Animate.css comes packed with a few utility classes to simplify its use.

Slow, slower, fast, and Faster classes

You can control the speed of the animation by adding these classes, as below:

<div class="animate__animated animate__bounce animate__faster">Example</div>

Class name	Default speed time
`animate__slow`	`2s`
`animate__slower`	`3s`
`animate__fast`	`800ms`
`animate__faster`	`500ms`

The animate__animated class has a default speed of 1s.

Delay classes

You can add delays directly on the element’s class attribute, just like this:

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Animate.css provides the following delays:

Class name	Default delay time
`animate__delay-2s`	`2s`
`animate__delay-3s`	`3s`
`animate__delay-4s`	`4s`
`animate__delay-5s`	`5s`

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:

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

Class Name	Default iteration count
`animate__repeat-1`	`1`
`animate__repeat-2`	`2`
`animate__repeat-3`	`3`
`animate__infinite`	`infinite`

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.