This guest post was written by ANA GREGUREC, a Toptal freelance web designer.

Visual elements around us are changing over time, and we perceive that change as movement.

Our perception is used to this so much that, in video or pop art painting, our brain complements missing elements in order to produce a sense of motion.

We often use allegory to pass on an idea, trying to visually present the point of the story to allow the other person easier understanding. Using some kind of visualisation to paint a full picture of the story we are trying to tell is a good idea. Using animation to get the message across can be even better; if a picture is worth a thousand words, how much is an animation worth?

Animation on the web is doing exactly that; it is attempting to visualise the story, using allegory or visualisation of movement, such as pressing a button, opening a new page. We are trying to visualise various steps and processes in order to make them look more natural, to invoke action, or to make the design more appealing.

How Web Animation Got Started

From the early days of the World Wide Web, there was an effort to implement moving elements in pop-outs for important parts of the site so the website would look more dynamic and attractive. As in Jeffrey Zeldman’s website for ‘95 Batman, Batman Forever, where Batman’s flight towards the user was animated as a picture sequence, which was one of the first GIF animations on a web page.

That particular promo site was one of the most popular pages at the time, so it inspired web developers to combine GIF animation as a quirky element on their websites.

GIF is suitable for short loop pixel animations, or even some video. It doesn’t have variable transparency, and since it doesn’t support alpha channel in its palette, all pixels are either fully opaque or completely transparent.

GIF animations were the beginning of a renaissance in web design, but they were not ideal. GIFs are relatively heavy, so the result is usually a low resolution, pixelated sequence. Another drawback was the limited 8-bit palette, which resulted in a lot of dithering, depending on how many colours were needed in the scene.

The big animation boom came with Flash animations. Building simple, vector-based animations across whole websites, with possibilities for interaction, was like the baroque in web culture with (too) many animated elements. But, Flash offered a glimpse at the possibilities of dynamic web design, allowing designers to experiment and resulting in a period of rapid evolution and growth.

Flash animations are built in Flash, or similar animating software, often distributed in the SWF file format. Flash animations are lightweight and easy to make. A file using sound with clear, lossless vector graphics, had the weight of only a few kilobytes. Making animations had become a streamlined process that would not add much to the load time.

Interaction in Flash was enabled by Action Script (AS), an object-oriented programming language similar to JavaScript. AS was initially designed to control simple 2D vector animations. Flash animation wasn’t designed to be responsive, didn’t function well on all devices and was eventually dropped from popular mobile devices. While the file size was relatively small, Flash was not well-optimised and was therefore CPU hungry. This was, obviously, a problem on smartphones and other devices. The end of the Flash era came after Steve Jobs decided not to support Flash on Apple mobile devices.

Jobs said:

“Flash was created during the PC era – for PCs and mice. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.”

Web Animation Today

So, today we have different needs and animation tools must be flexible and light. Developers must create content for viewing on different devices, with different input methods, browsers, aspect ratios, pixel densities, and so on. Obviously, animation has to work perfectly on a 5-inch 720p smartphone through to a 9.7-inch QXGA tablet or to a 29-inch UHD monitor.

Also, we have lots of gestures for interaction with software, starting transitions, animations, and those gestures are no longer reserved for mobile devices. Our minds are so used to them so it doesn’t feel right when something is static and can’t be moved by the touch of a finger. The best solution for animation is accomplished by using HTML5, CSS3, JavaScript and scalable graphics (as SVG).

However, the fact that technology has matured to this point, that even underpowered mobile devices have the bandwidth and processing power to handle very demanding animations and high-resolution video content, does not mean websites should be overly “busy”. As always, it is about striking the right balance between dynamic interaction and static elements. The fact that you can implement a lot of animation does not mean you should.

Another thing to consider is cross-platform support. Ten years ago, designers did not have to make sure that their creations would look good on such a wide range of devices. Today, an animation has to work flawlessly on a smartphone and a huge smart TV. Different aspect ratios, portrait and landscape orientations, as well as various pixel densities and viewing distances must be taken into account. This presents the designer with a new set of challenges and creates additional pitfalls. Testing consumes precious time, there are more things that could go wrong on a multitude of platforms, and animations have to be more detailed than ever.

The good news is that HTML5, CSS5 and JavaScript help tackle most, but not all, of these problems. Still, it is always a good idea to tread carefully, especially if you are in uncharted territory opened up by each new computing platform and display resolution.

Why Use Animation On Websites?

Animation has a story behind movement, it is all about giving a soul (lat. anima) to design elements. Web animation is intertwined with the user’s movement through the website, and it is there to provide organic movement to elements to the website. The web animator needs to be aware of the user experience and predict likely interactive paths. The experience should be seamless and logical.

Don’t look at animation from a purely technical perspective, you have to do it from the user’s perspective.

One of the most important things about animation is timing. Timing gives physical and emotional meaning to an animation. The animator needs to use timing to give the user the right feeling and perception. Is the animation fluid? How fast is it? What kind and how many keyframes should be used in an animation? What reaction is caused by interaction, and how fast does the reaction come after interaction?
If the animation is not fluid (has problems with the timing), the user could perceive it as a bug and lose motivation for further exploration of that particular website.

From a logical point of view, we can divide web animation into two basic types:

• Static animation with simple logic, no complex dynamic parameters, a .gif animation, for example.
• Dynamic animation with some kind of user engagement, which depends on user input, and other variables, and can have many different outcomes.

Dynamic animation has its own logic, determining how the animation will flow. The best example of dynamic animation is a game, where users manipulate on-screen content.

A simple example would be changing positions of elements through scrolling controlled by the user. Depending on the user’s location on the website, a particular sequence of animation will begin. Here is a straightforward example.

This approach is often used to present infographics on a website, so the user pays more attention while browsing. It is a dynamic way of highlighting relevant information. This website is a couple of years old, but it is still a good example.

Dynamic animation is good way of keeping attention focused on important parts of a website, and obviously, it allows designers to present products and services in a more attractive way. In order to create dynamic web animation, we need more than plain old CSS and HTML.

Pros And Cons Of Web Animation

Lets go through the pros and cons of animation techniques, including legacy solutions that are no longer in use.

But what about the pros and cons of web animation in general? A well-executed animation can still look out of place, so it is always a good idea to ask yourself (and the client) a few questions before proceeding to integrate animation in your design.

For starters, you need to check whether or not animation will affect the user experience. Will it actually improve the experience?

To do this, you need to:

• Closely examine the existing design (if available).
• Take a look at the target audience and its hardware platforms.
• Check the site load times and CPU load.
• Examine other alternatives.
• Always keep usability in mind.

The decision to use animation should be treated as any other design decision; you have to weigh the pros and cons and make sure that the user experience is not compromised, and that you won’t be stuck with a lot of inefficient code (which you may have to tweak and update later on).

Generally, using animation for the sake of animation is not a good idea. Web animation technology has matured, but the fact that it’s widely available shouldn’t be the only reason behind your decision to implement it.

Don’t look at animation from a purely technical perspective, you have to do it from the user’s perspective.