How to create cool animations with AngularJS 1.2 and Animate.css

I recently received an email:

Hi Jurgen,
Can you please explain how you do the animations on your articles page? Thank u.
Robert

To be honest it took me quite a bit of time to get it working.

I used AngularJS 1.2 on my previous website and had read a great article on year of moo about animations in AngularJS 1.2.

I also used Animate.css before but never in conjunction with Angular 1.2, which has a completely revamped animation API in v1.2.

So I started looking for a way to get them to work in tandem. After some experimentation I found that they actually work very synergistically and allow me to add very cool animations with just a few lines of code.

So let me show you the solution I came up with...

This article refers to my old website, so the demo is no longer available but the code is still valid.

Requirements

The example code in this article specifically requires:

• AngularJS v1.2.0 or higher
• Animate.css by Daniel Eden

Step 1: Load the AngularJS animation module

Animation is disabled by default in AngularJS 1.2. To enable it, you have to load the ngAnimate module that comes in a separate file called angular-animate.js.

There are three ways to add angular-animate.js to your app:

Download it from the AngularJS website (click the download button and then "extras" in the popup).

Load it from a CDN: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js

Install it via Bower:

 $ bower install angular-animate

No matter what method you prefer, you will have to load the file in your HTML accordingly.

My personal favorite is Bower so I use the following HTML fragment:

// Using Bower
<script src="/bower/angular/angular.js"></script>
<script src="/bower/angular-animate/angular-animate.js"></script>

but if you prefer CDN, you could use:

// Using CDN
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>

Now that the angular-animate.js file is loaded, you can add the ngAnimate module to your AngularJS application:

// Specify the ngAnimate module as a dependency for your AngularJS app
angular.module('yourApp', ['ngAnimate']);

If you don't see any errors in the browser console, the ngAnimate module is now loaded correctly in your AngularJS application.

You won't see any visual changes yet. That's ok. We've only just installed the animation engine so far.

Now it's time to load some animations to work with...

Step 2: Load the Animate.css library

You could actually start writing your own CSS animations, but Daniel Eden created Animate.css, a fantastic collection of CSS animations for you to use in your projects.

Since I'm a fan of Daniel's work, it was a no-brainer for me to use Animate.css for this website.

So, similar to step 1, there are different ways you can include Animate.css in your application:

• Download it from the Animate.css website
• Install it via Bower: bower install animate.css

And then load it in your HTML accordingly:

<link rel="stylesheet" href="/bower/animate.css/animate.min.css">

Building on the metaphor of comparing step 1 with creating an engine, you can think of step 2 as providing the gasoline.

We now have an animation engine that has a library of animations at it's disposal, but there is still no visual action, so it's time to fill the engine with gasoline and start it...

Step 3: Start animating

The final step is to bind events triggered by the AngularJS animation engine with actual animations provided by Animate.css.

AngularJS 1.2 triggers animation by adding and removing CSS classes to an HTML element when certain events occur e.g. when an element is added to the DOM, when an element is removed from the DOM, when an element is shown using ng-show, when an element is hidden using ng-hide, etc.

For the articles page I use an unordered list and an ng-repeat directive to display the articles:

<ul>
    <li ng-repeat="article in articles">
        {{article.title}}

What ngAnimate essentially does is add CSS classes to the li elements whenever they are added or removed from the DOM.

Suppose the code above produces the following HTML:

<ul>
    <li>Article one</li>
    <li>Article two</li>
    <li>Article three</li>

Nothing out of the ordinary here. This is just how ng-repeat works, but watch what happens if an article is added to articles:

<ul>
    <li>Article one</li>
    <li>Article two</li>
    <li>Article three</li>
    <li class="ng-animate ng-enter ng-enter-active">Article four</li>

And then as soon as the addition ends, the list stabilizes to:

<ul>
    <li>Article one</li>
    <li>Article two</li>
    <li>Article three</li>
    <li>Article four</li>

The same happens when an article is removed from articles:

<ul>
    <li>Article one</li>
    <li>Article two</li>
    <li class="ng-animate ng-leave ng-leave-active">Article three</li>
    <li>Article four</li>

And then as soon as the removal ends, the list stabilizes again to:

<ul>
    <li>Article one</li>
    <li>Article two</li>
    <li>Article four</li>

Depending on the event, ngAnimate will add specific CSS classes to the relevant HTML elements.

A complete list of events and their corresponding CSS classes is available on the AngularJS animate API page.

Armed with this knowledge, I could now edit my own CSS stylesheet and bind these CSS class changes triggered by ngAnimate with animations provided by Animate.css:

ul.articles > li.ng-enter {
    -webkit-animation: bounceIn 1s;
    -moz-animation: bounceIn 1s;
    -ms-animation: bounceIn 1s;
    animation: bounceIn 1s;
}
ul.articles > li.ng-leave {
    -webkit-animation: bounceOut 1s;
    -moz-animation: bounceOut 1s;
    -ms-animation: bounceOut 1s;
    animation: bounceOut 1s;
}

This result is that the bouncIn animation is applied to articles that are added to the list and the bounceOut animation is applied to articles that are removed from the list.

Conclusion

Adding animations to your website is a breeze with the new Angular 1.2 animation API.

Combined with the powerful animations provided by Animate.css, it allows you to easily add cool animations to almost any page or element with just a few lines of readable CSS.

Changing the animation merely involves changing a few lines of CSS without having to touch your markup, which is great for maintenance.

The example from this article just scratches the surface of all the different effects you can create with the available ngAnimate events and Animate.css animations.

I hope this article helps you on your way to create your own spectacular animations, so feel free to share them in the comments section below.

Have a great one!