Learning AngularJS Animations: Enhance user experience with awesome animations in AngularJS using CSS and JavaScript

Animation, by definition, is the process of creating a continuous motion over a period of time. The World Wide Web started with static HTML pages, and then .gifs and JavaScript animations started to appear. There were nonstandard <blink> and <marquee> HTML tags too, which were very annoying and limited. These were supported only by very old browsers and are currently deprecated.

Since technologies improved and the Internet bandwidth increased, animations have been a big deal on web browsers across the years. Developers started using Adobe Flash™, Java applets, Microsoft Silverlight, and other third-party solutions that lacked interoperability. Until recently, it was hard to rely 100 percent on a solution. This problem led to the creation of standards such as CSS3 Transition and CSS3 keyframe animations.

Check out http://www.w3.org/TR/css3-animations/ and http://www.w3.org/TR/css3-transitions/ for W3C's working drafts.

Another key improvement to animations on web browsers is the evolution of JavaScript engines and layout engines. Together, these improvements created an environment that enabled us to animate our web applications with cross-devices and the interoperability safety of operating systems. Standardization is the solution.

HTML, CSS, and JavaScript have been used to create web applications, and recently, they have even been used to create native apps for iOS, Android, and other devices with solutions such as PhoneGap.

Check out http://phonegap.com for more information on creating apps using web technologies.

Microsoft adopted this stack (HTML, CSS, and JavaScript) as an option in order to create native apps for Windows 8 as well. This is evidence that CSS3 and ECMAScript will evolve faster and in partnership with big companies such as Google, Microsoft, and Apple.

Currently, all major web browsers are evergreen, which means that they automatically update themselves without asking the user to accept them; they update themselves silently. This is a new era for web development. Old browsers that used poor JavaScript engines and lacked support for CSS3 are dying.

AngularJS calls itself a superheroic JavaScript Model View Whatever (MVW) framework—no kidding; this is on the main page. AngularJS is an extensive framework that helps frontend developers on many different aspects. One of these aspects is how to animate all the stuff that magically appears on the browser when we manipulate the scope variables.

Check out the website of AngularJS at https://angularjs.org/ for more information on this framework's awesomeness.

The framework is already modular as of Version 1.3 and has the intention to be even more modularized with future releases. The ngAnimate module lets you animate the common directives built in AngularJS, such as ngRepeat, ngShow, ngHide, ngIf, ngInclude, ngSwitch, and ngView.

Including the ngAnimate module in the framework enables hooks that trigger animations that you want to be displayed during the normal life cycle of native directives and custom directives.

We just need to create the animation declarations that will be triggered by these hooks using CSS3 transitions, CSS3 keyframe animations, or even JavaScript animations with callback functions. We will learn how to create these animations in Chapter 3, Creating Our First Animation in AngularJS.

AngularJS follows the convention of the configuration design paradigm, so animations can be placed using plain CSS3 animations just by following the naming conventions that will be listed later.

Animations on AngularJS are completely based on CSS classes. Animation hooks enabled by the ngAnimate module are provided by classes that are added or removed from elements in specific events. The events in which we can hook animations are the enter, move, and leave events of the DOM element and the addition or removal of a class from the element. This is a simple but powerful unique concept, as animations should be used on these events. This approach makes animations on AngularJS very intuitive without much effort or using a lot of code.

This AngularJS approach is different from jQuery animate, as we declare animations based on classes instead of imperatively adding an animation using JavaScript wherever a DOM manipulation is expected to occur. As most of these DOM manipulations are implicit in AngularJS, the animations' approach is mainly declarative and the animation hook is not intrusive.

Animations are useful for users when they grab the user's attention, catching the users' eye for specific elements, and making their lives easier. Motion builds meaning about relationships between elements, functionality, and intention of the system; it enhances the user cognition.

Animations can create responsiveness when a button element is touched and clicked on and a new element is added to the view from the origin point of the button.

Animations can tell a user when an element is moved from point A to point B of the view, guiding the user's attention. They can improve conversion; in this case, we should always use split tests.

It is easily possible to implement all the cases that I described previously using the events hooks that ngAnimate provides to us.

Google Material Design is a great resource that tells you how to apply animations to a web app. Check out http://www.google.com/design/ for more information.

The CSS3 animations and transitions created a way for modern browsers to recognize what animations are. They also created a way for modern browsers to differentiate animations from other operations so that they can use the Graphics Processing Unit (GPU) to accelerate the hardware of the animation instead of the Central Processing Unit (CPU), which receives all other operations.

Another advantage of using CSS transitions and animations instead of JavaScript is the fact that JavaScript runs on a browser's main thread. CSS animations enable browsers to run operations on new threads and create different layers, which are separated from everything else happening on the main thread. In other words, while your main UI thread will be in heavy use, JavaScript animations might freeze although CSS animations will continue to work.

Nowadays, web apps run on devices too, and browsers can stop CSS3 animations when the app is in the background tab, resulting in improved battery life. This is just one of the possibilities for the browser to improve its performance. In Chapter 8, Animations' Performance Optimization, we will see how to optimize an animation's performance.

Check out http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ for more information on high performance animations.

Here, we see one example of animation that can be easily created with CSS3 as well as JavaScript.

The HTML code for the page is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started</title>
    <link href="animations.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h1>Animation with JavaScript</h1>
        <!--There is a click listener for this button -->
        <button id="jsBtn">Click here to move the element below with JS</button>
        <div id="jsanimation">
            This block will be moved by JavaScript
        </div>
        <h1>Animation with jQuery</h1>
        <!--There is a click listener for this button -->
        <button id="jQBtn">Click here to move the element below with jQuery</button>
        <div id="jQanimation">
            This block will be moved by jQuery
        </div>
        <h1>Animation with CSS3 transition</h1>
        <!--There is a click listener for this button -->
        <button id="cssBtn">Click here to move the element below with CSS3 transition</button>
        <div id="csstransition">
            This block will be moved by CSS3 transition
        </div>
        <h1>Animation with CSS3 animation</h1>
        <!--There is a click listener for this button -->
        <button id="cssAnimationBtn">Click here to move the element below with CSS3 animation</button>
        <div id="cssanimation">
            This block will be moved by CSS3 animation
        </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="animations.js"></script>
</body>
</html>

The declarative way to animate is CSS. In CSS, we defined the translate transform for objects with the .move-to-right class. This declaration makes the move but does not create the animation between the moves. We declared how the div element to be moved should be transitioned; it should last 2 seconds and be slow towards the start and end.

The animations.css CSS file is as follows:

/* Code used by JavaScript animation sample */
#jsanimation {
    position: relative;
}

/* Code used by jQuery animation sample */
#jQanimation {
    position: relative;
}

/* Code used by CSS Transition animation sample */
#csstransition {
    position: relative;
    /* Here we should add -moz-transition, -webkit-transition, -o-transition for browsers compatibility, we will explain about vendor prefixes later */
    transition: all 2s ease-in-out;
}

.move-to-right {
    /* Here we should add vendor prefixes too */
    transform: translate(100px,0);
}

/* Code used by CSS Animation sample */
#cssanimation {
    position: relative;
}

@-webkit-keyframes move-to-right-animation {
    from {
        left: 0px;
    }

    to {
        left: 100px;
    }
}

@keyframes move-to-right-animation {
    from {
        left: 0px;
    }

    to {
        left: 100px;
    }
}

.move-to-right-animation {
    position: relative;
    left: 100px;
    /* Here we should add -moz-animation, -o-animation for browsers compatibility*/
    -webkit-animation: move-to-right-animation 1s ease-in-out;
    animation: move-to-right-animation 1s ease-in-out;
}

The animations.js JavaScript file is as follows:

/* Code used by JavaScript animation sample */
var jsAnimationElement = document.getElementById('jsanimation');
var jsAnimationBtn = document.getElementById('jsBtn');
/**
* Listener of the "Click here to move the element below with JS" button
*/
jsAnimationBtn.addEventListener('click', function moveBtnClickListener() {
    //This variable holds the position left of the div
    var positionLeft = 0;

    /**
    * function that moves jsAnimationElement 10px more to right until the positionLeft is 100
    */
    function moveToRight() {
        positionLeft += 10;

        /* Set position left of the jsanimation div */
        jsAnimationElement.style.left = positionLeft + 'px';

        if (positionLeft < 100) {
            /* This recursive function calls itself until the object is 100px from the left, every 100 milliseconds */
            setTimeout(moveToRight, 100);
        }
    }

    moveToRight();
}, false);

/* Code used by jQuery Animation sample */
/**
* Listener of the "Click here to move the element below with jQuery" button
*/
$("#jQBtn").click(function () {
    /** Use the jQuery animate function to send the element to more 100px to right in 1s */
    $("#jQanimation").animate({
        left: "+=100"
    }, 1000);
});

/* Code used by CSS transition animation sample */
var cssTransitionElement = document.getElementById('csstransition');
var cssTransitionBtn = document.getElementById('cssBtn');
/**
* Listener of the "Click here to move the element below with CSS3" button
*/
cssTransitionBtn.addEventListener('click', function moveCssBtnClickListener() {
    /* Add class "move-to-right" to the block on button click */
    cssTransitionElement.classList.add('move-to-right');
});

/* Code used by CSS Animation sample */
var cssAnimationElement = document.getElementById('cssanimation');
var cssAnimationBtn = document.getElementById('cssAnimationBtn');
/**
* Listener of the "Click here to move the element below with CSS3" button
*/
cssAnimationBtn.addEventListener('click', function moveCssAnimationBtnClickListener() {
    /* Add class "move-to-right" to the block on button click */
    cssAnimationElement.classList.add('move-to-right-animation');
});

This code shows you four approaches for the same animation. The intention is to move a div element 100 px to the right smoothly. This is not the AngularJS way to create animations, but before you learn how to create an animation with AngularJS, you should know all the options.

First we created an animation with JavaScript without requestFrameRate. The result is not so good, and its code is not so pretty. The second animation uses jQuery animate; the code is simpler than the JavaScript version, is imperative, and the result is OK. The third animation uses the CSS transition; it's very clean code with a great and smooth result, declarative way. The fourth animation uses the CSS animation with the same result as the transition version. It made the animation declarative and a little more powerful than the transition, as we can add frames between 0 percent and 100 percent of the animation, although the code is bigger. At this time of writing this, it's necessary to use the -webkit- vendor prefix for the animation to work, even for Chrome.

Although CSS3 animations and transitions have huge advantages, they have disadvantages as well. Creating complex, combined animations is still hard or impossible in order to achieve a good result. In cases like these, JavaScript animations are a better option. JavaScript animations are an option for fallback too when transitions and CSS animations aren't available, which is a common scenario when your project supports old browsers.

A good website that will help you know which browsers have support for CSS animations and transitions is http://caniuse.com.

AngularJS has adopted the standards for animation on the Web. It embraces CSS3 Transitions, animations, and JavaScript. It's great because the developers can choose the animation option that best fits their needs. As you have already read, sometimes, one option fits better than other, so this is a great feature of ngAnimate.

With the ngAnimate module, it is far easier to animate in AngularJS because it brings a code pattern and convention that is already integrated with AngularJS native directives. This allows us—the developers and the open source community—to have a quick start to animation and a pattern to develop our custom animations. In later chapters, we will see how to integrate custom directives with AngularJS animations using the $animate service, which is the main topic of Chapter 5, Custom Directives and the $animate Service.

This is all possible due to the class-bases approach that AngularJS uses. We will see more of this in Chapter 3, Creating Our First Animation in AngularJS, when we create our first AngularJS animation.

Another advantage is that it's easy to integrate CSS animation libraries such as animate.css and Effeckt.css, as these libraries use CSS3 transitions and animations.

Check out http://daneden.github.io/animate.css/ and http://h5bp.github.io/Effeckt.css/ for CSS animations libraries.

Create the same JavaScript animation as the one in our sample, but instead of setTimeout, use requestAnimationFrame. Check out https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame for more information on requestAnimationFrame.

In this chapter, we gave an introduction on how the AngularJS animations module and web standards work together, a notion of what can be achieved using them, and an overview of the differences between JavaScript, CSS3 animations, and transitions.

We took a quick overview of animations in web history and how attached they are to the evolution of web standards in AngularJS. We saw samples of simple animations created with JavaScript and CSS3, and we got an idea about how we should choose each one of them so that we can achieve the best performance and result.

In the next chapter, you will learn how to create animations using CSS3 in order to create smooth AngularJS animations, which are known as jank free animations.