Smashing Magazine - The Web In Motion: Practical Considerations For Designing With Animation

The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly interfaces on mobile and desktop, and JavaScript libraries already exist to handle complex interactive animations. In the wake of so much CSS versus JavaScript animation infighting, a new API specifically for web animation is coming out that might just unite both camps.

Its an exciting time for web animation, and also a time of grave miscommunication and misinformation. In 2014, I had the chance to travel the world to talk about . I met and interviewed dozens of people who use and champion both CSS and JavaScript. After interviewing so many developers, designers and browser representatives, I discovered a technical and human story to be told.

What youre about to read is purely observational and as unbiased an account as you will be able to find on the subject of web animation.

Since the era of Flash, its become fashionable to think of animation as little more than decoration, a flashy afterthought, often in poor taste, like an unwelcome blink tag. But unless we want to display nothing other than copy on a screen, animation is still very much our friend.

For user interface designers, animation reinforces hierarchy, relationships, structure, and cause and effect. demonstrates that animation helps humans understand whats happening on screen. Animation stitches together app states and offloads that work to the brains GPU the visual cortex.

For interaction developers, complex visuals from infographics on dashboards to video games on tablets are impossible to create without animation to glue all the pieces together. If we want those things on the Internet, we still need animation.

Sadly, we have fallen behind in the motion design race. Products that use animation to benefit their users will succeed where their static or animation-abusing competitors will fail. As it stands, native apps are beating the pants off the web. App developers have been incorporating animation into their designs and fleshing out workflow and prototyping tools like from day one.

But things might be turning around. iOS Safari team pushed out the CSS animation and transition specifications so that websites can look and feel as good as iOS apps do. Even Google has picked up on this, in its Material Design recommendations, with careful dos and donts to apply animations and transitions meaningfully, with purpose.

Animation is the natural next step in the evolution of our application and device ecosystem. It makes the digital world more intuitive and interesting for users of all ages. And so long as our devices sport GPUs, its not going away.

At its core, animation is just a visual representation of a rate of change over time and space. All animation can be distilled into three types:

Static animation runs from a start point to an end point, with no branching or logic. This can be testifies.

Stateful animation in its simplest form takes boolean input , for instance and animates between the two states. This is currently achieved in JavaScript frameworks by applying and removing classes with scoped CSS animation.

Dynamic animation can have many outcomes depending on user input and other variables. It uses its own logic to determine how things should animate and what their endpoints are. It could entail dragging a page along behind your finger according to the speed of your swipe, or dynamically changing a graph as new data comes in. This is the trickiest kind of animation to accomplish with the tools at our disposal today. CSS alone cannot be used for this kind of animation.

The astute CSS developer might point out that, with enough states, CSS animation could closely resemble dynamic animation. This is true to a point. But truly dynamic animation has more end states than you can possibly anticipate.

Just imagine the humble loading bar. Having a different class for every percentage point of fullness would easily run to a hundred lines of CSS, not to mention the number of times your JavaScript would have to touch the DOM to update the classes and the browser repaints. We definitely could write a more performant dynamic loader with JavaScript alone.

CSS animation is declarative: Aside from a handful of pseudo-classes, such as :hover and :target, it accepts context from neither the user nor the users surroundings. It does only what its author tells it to do and cannot respond to new inputs or a changing environment. Theres no way to create a CSS animation that says If youre in the middle of the page, do this; otherwise, do that. CSS doesnt contain that sort of logic.