Tuesday, August 20, 2013

Introduction to Animating in HTML

Over the last few years, designers have begun to use a lot of animations directly within HTML. That's kind of cool, as you don't need a plugin in order to see their work. There are several ways to make animations in HTML and in this article I will summarize a lot of examples and techniques for creating animations directly in HTML using both JavaScript and CSS.

JavaScript way

I spent several years in Flash development. To make an animation there, you have to create different static images that display in a sequence thereby creating the illusion of movement. The same approach is valid for HTML. For example, if you have five seconds and increase the width of a DOM element five times with 20px the result will be an animation.

One popular way to make animations is to use JavaScript. For example, you could create a function, which executes again and again and changing a property of a DOM element. For example, the below code adjusts the width of of an element in the context of a loop.

As far as I know, jQuery uses similar approach for its .animate method.

For a good amount of time this was enough. It was a popular way to create animations in HTML. The good thing is that you have control over the whole process, knowing when the animation starts and when, exactly, it ends. You could easily decide to make something else occur in the middle of the animation or 20% before it finishes.

Easing

Of course, creating linear movements is not enough. That's why we have ease functions, which are designed to change the values applied to the element in a manner to make the animation more interesting. In the world of Flash, Robert Penner made a big impact by introducing his easing methods. The same idea was later moved to JavaScript and today there is even a plugin for jQuery to handle easing.

So, how could we use easing? Let's say that we want to change a div's width from 0px to 10px in 10 steps. If we use linear movement the values, which we have to apply will look like this:

The calcAnimation function creates a linear type of movement. It's like that because we used the most simple calculation to create the values. Once we get the difference between the starting and ending point we divide it to the number of steps. The result is a number, which we have to apply to the property on every step. Luckily we are able to replace our simple calculation with a better function. For example:

You don't need to try to understand the math behind InOutElastic method. You just need to know that it returns a set of values should be appled to create the animation.

CSS way

There are a lot of benchmarks showing that CSS3 animations are faster then their JavaScript equivalenta. For instance, here is a small experiment proving that. There are two ways to create animations with CSS: transitions and animations.

CSS transitions require two properties to be set -transition-property and transition-duration.

transition-property: background;
transition-duration: 500ms;

Please note that, in these examples, for the sake of simplicity I am not including the browser specific prefixes.

Here is an example. Because the transition properties are added, the background color is changed smoothly when you hover the button.

If you have several properties that need to be transitioned, you can split them with commas.

There is also CSS animation, which gives you ability to determine the values in different moments of the animation process, not only at the beginning and the end. A simple example might include changing the background color at specified points in the animation:

While it is clear that CSS animations are better choice than JavaScript animation there are some disadvantages:

You can't stop or pause animations;

The syntax is not so nice;

It is a little bit difficult to sync different animations

The proper way

My opinion is that we should stick to CSS transitions for the simple hover or show/hide animations and use CSS animations for complex use cases. That's because we are concerned about performance. If we decide to use only JavaScript then our job is kinda easy but the final result will may perform poorly, especially on the mobile devices.

Understanding how to start an animation

Normally you know how your final frame should look, so you can begin by creating anew CSS class containing the values for that final frame. After that, just add the class to the element to begin the animation and remove it when you want to return to the initial state. The adding of the class will automatically start the process.

Catching the end of the animation

This is a critical part of creating complex animations. Every browser has its own name for the event that is fired, but the following code offers a cross-browser solution. A similar technique is used in Modernizr.

The following widget shows the code in action. If you click on the button you should see that, first, the color is changed and then the width of the box is increased. That’s because two new CSS classes are added sequentially, one after the other.

Keep in mind that the event handler receives an object which contains information about the animation like, for example, which property was changed, tje elapsed time and so on.

Be creative

I strongly recommend checking out Animate.css. It is a collection of CSS classes which you can use to apply some nice animations to DOM elements without needing to worry about the math.

In the above example I simply attach/remove two classes: rotateInDownLeft and bounceOutRight. I also used additional helper for detecting the end of the animation. Animate.css uses CSS animations, not CSS transitions, so the method is a bit changed:

You can do a whole bunch of other stuff with *Animate.css* when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft');

Animate.js

These days I’m trying to avoid the usage of libraries like jQuery when they are not necessary. For example, here I need to select an element and change its class attribute. There are solutions for that which use simple JavaScript.

I used the Animate.css library in two projects and in both I needed a tight control of the animations from within the JavaScript portion of the application. That’s why I decided to write a simple JavaScript class on top of Animate.css that gives control over the animations. It is available in my fork of the library here.

You may have nested closures but to keep the code readable it is good to use the end method. It accepts the name of a class and a handler that will be notified at the end of the animation.

Very often I needed to start a new animation once another finishes. Instead of doing that in a closure, I changed the end method a bit. It also accepts a string as a second parameter, which is actually a new Animate.css class.

Running animations in sequence

I think that this method is self-explanatory. Keep in mind that every animation class is removed before the new one is added.

It is worth noting that every handler in the JavaScript class is called within the context of the API. So, the this keyword actually points to the API and you are able to write things like the following:

Here is an example showing my little controller that actually demonstrates many of the available animations.

Where to go from here

Hopefully this article has provided you with some useful information about some of the available options for creating animation in HTML, CSS and JavaScript. If you’d like to learn more about Animate.css, you can check the GitHub site which also offers the ability to generate a custom build including only the animations your application requires.