Further reading on Smashing: Link
- SVG and CSS animations with clip-path1
- Creating ‘hand-drawn’ Animations With SVG2
- Practical Animation Techniques3
- UI Animation Guidelines and Examples5
- Designing Animations In Photoshop6
- Fast Prototyping UI Animations In Keynote7
What you’re about to read is purely observational and as unbiased an account as you will be able to find on the subject of web animation.
Flash May Be Gone, But The Era Of Web Animation Has Just Begun Link
Since the era of Flash, it’s 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. Research going back to the early ’90s9 demonstrates that animation helps humans understand what’s happening on screen. Animation stitches together app states and offloads that work to the brain’s 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 Flinto10 and Mitya11 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, putting animation front and center12 in its Material Design recommendations, with careful do’s and don’ts 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, it’s not going away.
Animating All The Things Link
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:
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.
More States != Dynamic Animation Link
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.
CSS animation is declarative: Aside from a handful of pseudo-classes, such as
:target, it accepts context from neither the user nor the user’s surroundings. It does only what its author tells it to do and cannot respond to new inputs or a changing environment. There’s no way to create a CSS animation that says “If you’re in the middle of the page, do this; otherwise, do that.” CSS doesn’t contain that sort of logic.
Interaction developers have had a different time of it. CSS animation is often too declarative to handle the things these developers want to build. Paying clients demand reliable animation across a wide spread of browsers; so, many interaction developers and their studios have done what all clever developers do: make labor-saving libraries customized to their own processes. Some of these libraries, like GSAP17 and Velocity4118, are available to and developed for the public. But many others will never be released in the wild, because the people and agencies who created them don’t have the time or money (or will) to support an open-source project.
This is a deeply worrying story that I’ve heard over and over again, and it suggests that many developers are reinventing the wheel without moving the web forward. There isn’t enough demand for something considered “nice to have” to support many competitors. It’s easy to see how libraries like GSAP must be commercial in order to survive, or how sponsorships buoy libraries like Velocity.
Flash did a great thing by giving interaction developers and UI designers a universal workflow that accommodates all kinds of animations and a platform on which to edit them. But since Steve Jobs announced back in 2010 that the iPhone would never support Flash19, many former Flash developers have quietly gone into exile, taking their niche knowledge with them. Now, an entire generation of web designers has come online with relatively no knowledge of the possibilities and challenges we face when ramping up animation complexity.
But things are about to get quite… animated.
The Web Animation API:
The Greatest An API You’ve Never Heard Of Link
The Web Animation API is a W3C specification that provides a unified language for CSS and SVG animations and that opens up the browser’s animation engine for developer manipulation. It does the following:
- provide an API for the animation engine, enabling us to develop more in-browser animation tools and letting animation libraries tap into performance boosts;
- give (qualifying) animation their own thread, getting rid of jank;
- support motion paths20;
- provide post-animation callbacks;
- reintroduce nested and sequenced animations21 that we haven’t seen since Flash;
- enable us to pause, play, seek, reverse, slow down or speed up playback with timing dictionaries22 and animation player objects23.
The Web Animation API has been over two years in the making, and its features have been rolling out in Chrome and Firefox nightlies for the past six months. Mozilla is the major force behind the specification. Meanwhile, the Chrome team has been prioritizing the shipment of features.
Microsoft has the API “under consideration”28 for Internet Explorer. Apple, surprisingly, has also adopted a wait-and-see approach for Safari. And we can only fantasize about when the API will hit those web app engines powered by ancient forks of open-source browsers29.
It will be some time before this API is supported across the board. With half of browser makers waiting to see how developers will use it and most developers refusing to use a tool that isn’t widely supported, the API faces a chicken-and-egg scenario. However, in an on-stage conversation with Google’s Paul Kinlan at Fronteers, I suggested that, were the API to be fully supported in a closed and monetizable system for web apps, such as Google Play, developers would be able to safely use it in a walled garden until it reaches maturity and fuller support.
transform, animating the bulk of CSS properties will cause a reflow, a change in layout and/or a repaint of the pixels on the screen. The
will-change CSS property helps some33 by enabling us to point at something and tell the browser, “That, that thing is going to change. You do what you have to do change it efficiently.” The hope is that as browsers get smarter about graphics, they’ll move those elements into their own layer or otherwise optimize the way they handle those graphics. It’s the first step in eliminating hacks like
Such “performance hacks” often get slapped on as a magic fix whenever an animation is janking, but they often cause performance issues when used unwittingly. Performance decisions are truly best left to the browser in the long run. Fortunately, browser makers are scrambling to get fewer properties to trigger reflows, thus keeping them off the main thread. For animation library developers, this means that the Web Animation API could be a winning partner for performance in the near future.
Anyone working with web animation yearns for proper animation development tools: a timeline, property inspection, better editors, and the ability to pause, rewind and otherwise inspect an animation while debugging. The Web Animation API will open the guts of the CSS rendering engine to developers and the browser vendors themselves to create these tools. Both Chrome34 and Firefox are preparing animation features for their development tools. This API opens up those possibilities.
The Web Animation Community Today Link
Not many people other than those working on it are aware of the Web Animation API. The standards community is eager for real-world feedback from interaction and animation library developers. However, many developers feel that the standardistas live in an ivory tower, far removed from the rigors of the trenches, the demands of clients and the lessons learned from Flash.
To be fair, the standardistas haven’t exactly come out to meet their audience in the field. To join the “official” Web Animation API conversation, you must jump through some hoops, and getting on the email chain threatens to overflow the inbox of any busy developer. Alternatively, you could get on IRC and join the conversation there — if only designers used IRC. The conversation that needs to happen is unlikely to happen if the people who have the most to say simply aren’t there. Vendors and specification authors will need to find more ways to reach out to their key audience or else risk building an API without an audience.
But the standardistas aren’t the only ones with communication problems here. As a community, we are very judgmental and quick to deride things that we deem unworthy, be it Flash or an API we don’t like the look of. Many of us invest our egos in our tools and processes. But those things don’t define us. What we create together defines us.
- Animation library developers, read the specification35. It is long, but if GreenSock’s Jack Doyle can do it, so can you.
- Interaction developers who don’t have all day to read a huge specification, just read the readme on the polyfill’s page36. It’s a perfect TLDR. Now that you know what’s coming, you will know when it might be useful to you, whether for optimizing your library’s performance or building an in-browser timeline UI.
With web animation, we have a rare chance to put our egos aside and come together as a community to build a tool with which future generations of designers and developers can build great things. For their sake, I hope we can.
“The art challenges the technology, and the technology inspires the art.”
– John Lasseter, CCO Pixar
Rachel Nabors has an updated list of resources on the Web Animation API. To join the unofficial conversation, look for the
#waapi hash tag wherever you prefer to communicate.
- Web Animations37 (API specification), W3C
- Web Animations polyfill38 and Web Animation Next39 (the next incarnation of the polyfill)
- GreenSock40 animation library
- Velocity4118, a performant
.animate()replacement for jQuery
Join the Conversation Link
- Official mailing list: email firstname.lastname@example.org, starting the subject line with
- IRC: irc.w3.org#webanimations43
- Everywhere else: use the hash tag
#waapiand engage with the community
Make a Difference Link
People who have some familiarity with C++ coding can help implement the API in Firefox44. Brian Birtles45 might even mentor you! And Mozilla is always looking for people to help write documentation on MDN46.
People to Follow on Twitter Link
- Brian Birtles48, a principal author of the specification and with Mozilla Japan
- Alex Danilo49, Google platform team member and coauthor
- Tab Atkins—Googler50, coauthor and contributor to the CSS specification
- Jack Doyle51, member of GreenSock and GSAP
- Rachel Nabors52, head of animation think tank Tin Magpie53
- 1 https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/
- 2 https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
- 3 https://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/
- 5 https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/
- 6 https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/
- 7 https://www.smashingmagazine.com/2015/08/animating-in-keynote/
- 8 http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726
- 9 https://smartech.gatech.edu/bitstream/handle/1853/3627/93-17.pdf
- 10 https://www.flinto.com/
- 11 http://www.mitya-app.com/
- 12 http://www.google.com/design/spec/animation/authentic-motion.html
- 13 http://codepen.io/rachelnabors/full/rCost
- 14 http://codepen.io/collection/HtAne/
- 15 http://tympanus.net/Development/SimpleDropDownEffects/
- 16 https://docs.angularjs.org/api/ngAnimate
- 17 http://greensock.com/
- 18 http://julian.com/research/velocity/
- 19 https://www.apple.com/hotnews/thoughts-on-flash/
- 20 http://dirkschulze.github.io/specs/motion-1/
- 21 https://github.com/web-animations/web-animations-js#sequencing-and-synchronizing-animations
- 22 https://github.com/web-animations/web-animations-js#controlling-the-animation-timing
- 23 https://github.com/web-animations/web-animations-js#playing-animations
- 24 http://codepen.io/rachelnabors/pen/zxYexJ/
- 25 'http://codepen.io/rachelnabors/pen/zxYexJ/'
- 26 'http://codepen.io/rachelnabors'
- 27 'http://codepen.io'
- 29 https://developer.amazon.com/appsandservices/solutions/platforms/webapps
- 30 https://github.com/web-animations/web-animations-js
- 31 https://github.com/web-animations/web-animations-next
- 32 https://www.polymer-project.org/
- 33 https://dev.opera.com/articles/css-will-change-property/
- 34 http://src.chromium.org/viewvc/blink?view=revision&revision=183847
- 35 http://w3c.github.io/web-animations/
- 36 https://github.com/web-animations/web-animations-js#readme
- 37 http://w3c.github.io/web-animations/
- 38 https://github.com/web-animations/web-animations-js
- 39 https://github.com/web-animations/web-animations-next
- 40 http://greensock.com/
- 41 http://julian.com/research/velocity/
- 42 mailto:email@example.com
- 43 http://irc.w3.org#webanimations
- 44 https://developer.mozilla.org/en-US/docs/Introduction
- 45 https://twitter.com/brianskold
- 46 https://developer.mozilla.org/en-US/
- 47 https://github.com/w3c/web-animations
- 48 http://twitter.com/brianskold
- 49 http://twitter.com/alexanderdanilo
- 50 http://twitter.com/tabatkins
- 51 http://twitter.com/greensock
- 52 http://twitter.com/rachelnabors
- 53 http://tinmagpie.com/