Web animations

By web animation, we mean a fun, fascinating or moving element, play, music, sound, talk, clip, anything that breaks the linearity of textual content. Designers often use animations to have content components appear in turn for a better understanding of the content. Animations also have the power of interacting with the visitor.

What to consider?

First question: Do we need an animation? Will it help achieving our goals? If we reply Yes, the second question is : What is the best technology to create the animation? and What support can we expect from browsers?

How to decide the interest of using an animation? Considering the adequacy of the means we intend to use with our web targets. In other words, the animation will provide, or not, a suitable object in our web context. Where is expected to go the user's primary focus? This consideration decides the benefits and limits or drawbacks of an animated content.

Best use

Animations are better fit for
- Training purpose,
- Exhibition-like presentations,
- Art,
- Demos,
- Highlighting the message,
- Clarifying the content,
- etc.
In such contexts, an animation can efficiently represent the user's primary focus targeted. Thus, it becomes effective.

Interaction?

Looking at "user's interaction", the visitor typically has limited ways to interact with an animation. The interaction might bring incomplete results, as usually it does not lead to getting in touch with the website's team.

Means and methods

From the first DHTML trials to CSS3, we now have a wealth of possibilities, all incredibly powerful. To enter more in-depth in each method, see the commented resources We discuss the most effective technology for animation and their respective support by browsers.

Javascript

Javascript (and its many children, for instance, JQuery) is a fantastic programming language. Javascript remains a king when thinking animation. For those loving simplicity, a tiny piece of code can often do the trick.

CSS animations

CSS animations are the coming trend. The only limit to developers' imagination is the possible lack of support of some browser's versions.

Other methods

Apart from Javascript, CSS, html5, SVG, or even GIF animation, other methods are available: video, audio and more.

Server-side animation

Even server-side programs are an option.

Browser support

The website caniuse.com gathered focused information covering browser support for CSS HTML5 and SVG. The data organisation allows comparing them; search by browser version or by animation property. A great job! With or without detailed user's statistics for a website, this tool makes it easier to decide which mean and method to use. The website W3 Schools offers a synthetic table about browser support for CSS3 animations
(http://www.w3schools.com/css/css3_animations.asp).

Seduction, fun, questioning. All of us like to play with an animation, to build or use one. There is a penalty, however: animations can be distracting.

Animations are Seductive but Distracting

Commented sources


Download this page as a quick strategy guide (click Download to save as PDF file)Download

We gathered some excellent columns on the matter; click each link to see our comments and details on each source. You will be able to download the sources' list and comments through a link at the bottom of the page:

Animation Tutorials, framewords and libraries
A clever tool
JQuery animation effects
Transitions, Transforms and :Target
Smart CSS creations
Animation and Styling

Want to hear about new columns and resources:

Your thoughts? What are your criteria? Would you add or debate a point?

Leave us a

Go Top
 f
 
 G+
 in