In this fiercely competitive environment, companies are frantically looking for ways to capture and retain people’s attention. As we go about our daily lives, the endless stream of visual stimulation gushing at us from animated ads on the street, videos on our mobiles, not to mention our social media feeds, creates a sense of constant movement that is vying for our attention.

The split-second reaction to movement in our environment was developed out of the need to survive and triggered by environmental stimuli perceived as potentially threatening or harmful; people pay extra attention to things that move. As we catch something moving fast out of the corner of our eye, the brain alerts us in a split-second because our subconscious brain has already reacted to the danger before our conscious mind has had time to process the information.

Advertisers know this, and it is why we have animated street advertisements at bus stops and on subway platforms, video ads popping up in social media streams, and electronic billboards with full-motion video. The technique is a one-two punch effect designed to deliver marketing messages. First, by capturing our attention, and second, using video and animation to get the message across.

If a static picture is worth a thousand words, how much is an animation worth?

This is where web animation comes in. Web designers are hoping to capture and hold our attention, and maybe add an unexpected jolt of delight. Web animation can be used to visualize various steps in a complex process or idea, to illustrate a simple marketing message, or to move things on a web page in a natural and fluid way as people scroll—again, to draw attention to something.

How Web Animation Got Started, the Rise of GIFs

During the early days of the World Wide Web, things were rather static and boring. Webpages were mostly based on graphic design and layouts from the print world. However, some designers made a concerted effort—despite the technical and bandwidth challenges—to include early forms of web animation in order to make them more dynamic and attractive. One of the first additions of a GIF animation to a website was on Jeffrey Zeldman’s Batman Forever in 1995. Visitors were greeted by Batman’s flight towards them, animated as a picture sequence.

The Batman Forever promo site was one of the most popular sites at the time. It inspired other web designers and developers to incorporate GIF web animation as a quirky, eye-catching element into their websites.

Fast-forward 20 years and animated GIFs are now everywhere. They’re on Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram, and Facebook. GIFs are suitable for short loop animations, image sequences, and even short video loops. An unfortunate shortcoming though is that the GIF file format doesn’t have variable transparency and doesn’t support an alpha channel; therefore, 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. Especially back in the early days of dial-up and slow internet speeds, GIFs were bandwidth hogs. The result was a low-resolution, pixelated sequence. The drawback for designers having to compress GIFs to the smallest possible size was a limited 8-bit palette, which resulted in a lot of dithering. This changed with high-speed internet becoming more commonplace in the 21st Century, and as a consequence, web animation became better looking with millions of colors, and smoother with higher frame-rates.

The Dawn of Flash Web Animation

The big web animation boom came with the introduction of Flash in 1996 when Macromedia announced their web plugin and accompanying frame-based animation tool: Macromedia Flash (after they acquired FutureSplash Animator, a vector animation program). Flash played a leading role in bringing new capabilities to the web. From audio and animation to interactivity and video, Flash helped to push the internet forward.

The opportunity to build simple, lean, vector-based web animations across entire sites that included interactions, created what could be called web design’s “baroque” period with (too) many animated elements crowding the landscape. Nevertheless, Flash offered a glimpse into the possibilities of dynamic web design, freeing up designers to experiment and unleashing a period of rapid web design evolution.

Flash animations are lightweight and relatively easy to make. Only a few kilobytes in size, they are distributed in SWF file format and a file using sound with crisp vector graphics. Creating web animations became a streamlined process that didn’t add much to webpage load times. But for all that a significant drawback remained—a browser plugin was required for it to run.

Additionally, sophisticated interaction in Flash was enabled by ActionScript (AS), an object-oriented programming language similar to JavaScript. ActionScript was initially designed to control simple 2D vector animations but subsequently evolved into a sophisticated tool.

Unfortunately, Flash animation wasn’t intended to be responsive, didn’t function well on all devices, and was eventually dropped from all popular mobile devices. While the file size was relatively small, Flash was not well-optimized and ended up CPU hungry, which was a problem on mobiles as well. The end of the Flash era came after Steve Jobs decided not to support Flash on Apple mobile devices.

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.

Steve Jobs

Web Animation Today

Today, as Flash is obsolete, we have different needs for web animation. Tools must be flexible and light. Web designers must create responsive and adaptable content for different devices (desktop, tablet, and mobile), taking into account various screen dimensions, browsers, aspect ratios, pixel densities, and more. Our web animation masterpieces have to work on a 5-inch, 720px mobile through to a 9.7-inch QXGA tablet, to a 32-inch Retina 6K display.

Technology has matured to a point where even underpowered mobile devices have the bandwidth and processing power to handle very demanding web animations and high-resolution video content. This doesn’t mean websites should be super “busy.” As always, it’s about striking the right balance between the animation, dynamic interaction, and static elements. The fact that we can implement a lot of fancy web animation today doesn’t mean that we should.

Web designers/animators must also consider 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. Different aspect ratios, portrait, and landscape orientations, as well as various pixel densities and viewing distances have to be taken into account. This conundrum presents web designers with a set of new challenges and potential pitfalls. User testing consumes precious time, more things could go wrong on a multitude of platforms, and web animations have to be more detailed than ever.

HTML5, CSS3, JavaScript, and SVG (scalable graphics) seem to be the best solutions for web animation. Using these modern web technologies and languages will help tackle most, but not all, of the above problems. But it’s always a good idea to tread carefully, especially when in uncharted territory, and extensive QA and testing is a must.

Why Use Web Animation?

Web animation can engage and hold people’s attention longer than a static web page and communicates an idea or concept more clearly and effectively. Excellent web animation conveys a story behind every bit of movement. It’s all about bringing an animation to life with meaning and “soul” (lat. anima).

Web animation should be smooth, meaningful, and support the visitor’s journey. The web designer/animator needs to be aware of how the animation fits into the user experience, try to predict likely user flows, and then support it in a meaningful way.

Web designers mustn’t look at web animation from a purely technical perspective; they need to look at it from the user’s perspective.

One of the essential things about animation is timing. Proper timing gives physical and emotional meaning to an animation. The experience should be seamless and logical. If the animation is not fluid (has a timing problem), people could perceive it as a bug and lose all motivation to explore the website further.

The animator needs to use appropriate timing to provide the intended effect. How many keyframes should be used in the animation? What kind of dynamic change in the animation is due to visitor interaction, and how fast does the response come after the interaction? Is the animation whimsical, serious, entertaining?

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

• A static, non-interactive web animation, for example, a GIF animation.
• A dynamic web animation with user engagement and interactivity that changes on user input.

The best example of dynamic animation is a game, where users manipulate the on-screen content. Another simple example would be changing the position of certain elements as a website visitor scrolls through a parallax-scrolling website. The animation is not passive, it varies depending on user actions.

Dynamic web animation is often used to present animated infographics on a website, so people pay more attention to specific areas while scrolling the page—it’s a powerful way to highlight relevant information.

The Pros and Cons of Web Animation

Here are some pros and cons of web animation techniques, including legacy solutions that are no longer in use.

Technique	Pros	Cons
GIF	It is simple and available to everyone. No browser plugin required. It enables picture sequence animation, It can be video-like.	The size of animated gif files can be huge. Opacity control is non-existent, there is no alpha channel. It has low compression. It can be pixelated.
APNG	Supports alpha channel.	Not supported in most web browsers.
Flash	The exported swf file can be quite small. It’s fast, can be interactive, and it uses vector animation.	No longer supported on most platforms.
HTML/ CSS3	Simple and easy to learn. Good for transitions and transformations. HTML/CSS3 animations run well on mobile devices. It allows vector or pixel animation. Can also manipulate scalable vector graphics (SVG).	Not all SVG properties can be animated with CSS. It has limited possibilities for animation and often requires use of JavaScript or a SMIL. It cannot respond to new inputs or a changing environment (dynamic animation).
SMIL	It’s compact and capable of animating properties that CSS can’t handle. Preserves SVG when embedded as an image.	Not supported in all browsers.
JavaScript	Makes web animation easy when using an SVG animation library that generates an image sequence (.png sequence)	Doesn’t preserve SVG when embedded as an image.

What about the pros and cons of web animation in general? Well-executed web animation can still look out of place, so it’s always a good idea to ask some crucial questions (as well as quiz clients and other team members) before proceeding to integrate animation into a website’s design.

First, we need to check how the animation will affect the user experience. Will it improve the website’s UX? Designers ought to:

• Examine the existing website design (if available)
• Check the target audience and the hardware platforms they use
• Check the site load times and CPU load
• Explore other alternatives
• Keep an eye on usability

It’s not a good idea to use web animation on a site to simply follow trends.

The decision to use web animation should be treated as any other design decision; web designers must weigh the pros and cons and make sure that the user experience is not compromised. They should also work with developers to ascertain code requirements and ensure they won’t get stuck with inefficient code that may have to be tweaked down the road.

Modern web animation technology has matured significantly in the last 20 years—performance, available bandwidth, and rendering quality have increased. However, designers should tread carefully and only add animation to a website if it meaningfully enhances the user experience.

• • •

Further reading on the Toptal Design Blog:

• How to Create Custom Loading Animations to Decrease Bounce Rates
• Creating Mind-Bending Illustrations with Sketch and Looper in No Time
• A Step-by-step Guide to UI Animation with Principle and Sketch
• Logo Animation Inspirations to Make Your Brand More Relatable
• A Step-by-step Guide to Creating Animated Product Explainer Videos