What It Takes To Get Animations Right

The right animations can add a great deal of polish and impact to a web design. This might mean an animated opening, or it might mean subtle movement on an interactive element of your site, or it might mean a transition from one page to another. If done well, this can bring a website to life and add a sheen that’s missing from many static pages. Done wrong though, animations can be distracting, ugly and simply ineffective. So what’s the secret to a well-placed animation?

Bringing Your Animations to Life

First and foremost, what’s important is that you animate your page elements in the correct manner. This means you should be aiming to animate in a way that feels natural and almost organic.

An example of this is what’s known as ‘ease-in’ and ‘ease-out’. What these terms describe, is the way in which animations should accelerate and decelerate during their frames, rather than remaining at a constant speed throughout. In other words then, they should come to a gradual halt, in the same way that your arm would were you to move it. This is how we’re used to seeing things move, and it’s much less jarring than seeing something suddenly start moving then stop. It’s subtle, but if you apply it in your own animations, you will find there is a subtle difference.

Other small elements can have a similarly more natural effect. Objects tend to move in arcs more than straight lines for instance, while an ‘overshoot’ can give your animation a ‘personality’ of sorts.

Knowing When to Use Animations

Choosing the right time to add an animation is the most crucial part of all. If you use an animation too often or in the wrong place, then it will be distracting and will detract from the experience rather than add to it.

Remember that we are psychologically programmed to turn our attention to moving objects in much the same way that we notice bright, contrasting colors like red on a white background. Just as you wouldn’t fill a page with red boxes, nor should you fill a page with hundreds of moving elements unless you want your visitors to get motion sick!

Remember as well, that the key to good design is to communicate rather than decorate. In other words, any elements you include in your design should serve some sort of purpose that enhances the users’ navigation and understanding of the site.

What does animation communicate? Well, a transition can communicate whether you’re going up or down a layer in a page hierarchy (does the page move in from the left or right?), while a moving object tells you that that’s where you should be looking. Animations can also tell you that a page is loading.

Finally, animations can sometimes be used to fit more information into a smaller space. You can do this, for instance, using a content slider, or even using a marquee. Though marquees are somewhat controversial these days on the web and as non-standard HTML, they are generally advised against.