Web Animation Past, Present, and Future

Web animation has been exploding during the past year or two—and the explosion has been nothing short of breathtaking. JavaScript animation libraries like GreenSock have become the weapon of choice among interaction developers, and web design galleries like Awwwards and CSS Design Awards abound with sites reminiscent of the Flash era. It seems like every front-end development conference includes a talk about web animation. Last year at motion design conference Blend, Justin Cone of Motionographer called web animation the future.

Article Continues Below

Things are moving fast. So let’s recap.

Web Animations API coverage increasing#section1

The Web Animations API is a spec created to unite CSS Animations, Transitions, and SMIL (native SVG animation) under one animation engine. JavaScript developers can tap into it to build more performant DOM animations and libraries. Browsers can also tap into the API to build more advanced animation developer tools—and they’ve been doing just that.

With solid support from Firefox and Chrome teams, the Edge team moved the Web Animations API from “under consideration” to “medium priority,” clearly a reaction to the web development community’s votes for the API via Edge’s User Voice campaign. And let’s not forget WebKit—a team at Canon might be taking up the Web Animation banner! Could this mean WAAPI in iOS Safari? Find out in 2016! Or 2017.


Screenshot of the WAAPI Browser Support Test
Caniuse.com is a surprisingly unreliable source for uncovering just how much of the Web Animations API is covered in a given browser. Dan Wilson’s browser support test and Are We Animated Yet for Firefox remain good references.

SMIL falls as SVG rises#section2

Ironically, just as Edge moved to support the Web Animations API (a prerequisite to Microsoft’s adoption of SMIL), Chrome announced it would be retiring SMIL! Even without SMIL, SVG remains synonymous with web animation. That said, due to varying implementations of the SVG spec, animating it reliably across browsers is often made easier with third-party JavaScript libraries like SnapSVG or GreenSock’s GSAP, a tweening library for Flash that was rewritten in JavaScript.

Fortunately, some of the bugs that got in the way of animating SVG components with CSS have been addressed, so library-independent SVG animation should become more common in the future. Down the line, we can expect SVG behavior to be normalized across more and more browsers, but because of its unreliable reputation, developers will probably continue to associate SVG animation with GSAP and use it regardless.

In this regard, GSAP might become the next jQuery as SVG behavior normalizes and browsers expand their native abilities to match developer needs. That is to say, GSAP will remain the tool of choice for ambitious, complex, and/or backward-compatible projects, but could also suffer a reputation blow if it starts to look like a crutch for inexperienced or out-of-touch developers.


Screenshot of GSAP result
GreenSock will likely always stay ahead of the curve, providing stability and plugins for the things that browsers currently struggle with. We’re still at least a year or two away from a standalone SVG morph JavaScript library, and yet we can do this today with GSAP.

Prototyping solutions fall short#section3

One of the greatest challenges facing web animation has been tooling. Animating the web today requires years of accumulated CSS and JavaScript knowledge to accomplish things that seem primitive in comparison to what a designer with Adobe After Effects can learn to do in a month. This means that either front-end developers become animators, or designers become coders. (Could animation be the thing that unites these two at long last?)

Various tools and frameworks have emerged to try to meet this need. Frameworks like the aptly named Framer create “throwaway code” you can test with users; to work with it requires a basic knowledge of web development. Some apps, like Adobe After Effects, provide critical animation tooling (like a timeline UI) but only export videos, which makes iteration fast but user-testing impossible. Others, like InVision and much-lauded newcomer Principle, fall somewhere in between, providing a graphical interface that produces interactable prototypes without actually creating HTML in the process.


Framer's animation development interface
Framer: because “code isn’t just for engineers.”

Principle's animation development interface
It’s easy to imagine visual designers reaching for Principle’s animation-centric interface first.

All of them have their pros and cons. For instance, the animation workflow may be right, but the web development workflow ends up wrong (and vice versa). This leaves an opening for differentiation. Animation tooling might be the winning feature during upcoming jostling for market share in this crowded arena.

But right now, none is a clear winner. And some are already losing.

The framework Famo.us once touted its 3D physics animation engine and excellent performance to prototypers and ad designers. In 2015, it pivoted abruptly out of the space. Similarly, Adobe retired its web animation racehorse, Edge Animate while rebranding Flash Animate CC. Flash will continue to export to WebGL and SVG, but the message seems clear: Flash’s future looks more cinematic than interactive.

Browser tooling improves#section4

In December of 2014, Matt DesLauriers wrote, “I also feel the future of these tools does not lie in the document.body or in a native application, but in between, as part of the browser’s dev tools.”

The Web Animations API’s increased adoption allowed Chrome Canary and Firefox Developer Edition (disclaimer: I helped build the demo site) to launch their own animation tools in 2015. In the future, we can hope to see these tools grow and change to accommodate the web animator’s process. Maybe even as the Web Animations API becomes more well known, we will see third-party tooling options for CSS and SVG animation editing.


In-browser animation timeline tools
Firefox Developer Edition’s animation timeline was a first for browsers. While nowhere near as finished as Flash’s UI, this and Canary’s timeline tools are steps in the right direction.

Motion guidelines adoption up#section5

Following the lead of Google’s Material Design system, IBM and Salesforce released their own design systems with motion guidelines. (Disclosure: I assisted Salesforce with the motion portion of their Lightning Design System.) Increasingly, large companies that can afford to spend more time finessing their design systems and branding have been investing in codifying their UI animations alongside microinteraction guidelines. We’ll most likely see more medium-to-large companies following in the example of these giants.

How that documentation plays out largely depends on the audience. Persuasive and beautiful documentation of animation theory prevails at large companies recruiting internal animation evangelists, but when the product is designed for mix-and-match developers, animation rules become stricter and more codified alongside best practices and code.


Documentation library for Salesforce’s Lightning Design System
Motion design docs run the gamut from overarching design principles (IBM’s Design Language) to the atomic and modular descriptions seen here in Salesforce’s Lightning Design System.

UX and accessibility#section6

We learned a lot in 2015 about vestibular disorders (I even did a special screencast on the topic with Greg Tarnoff), a concern that may be wholly new to the web development community. Unlike contrast and ARIA roles, which can be “accessible by default,” the only animations that are accessible to everyone by default are opacity-based.

For those not willing to abandon animation or convert to an entirely fade-based UI, the challenge we face is how to give users choice in how to experience our sites. I’ve already written about our options going forward, and we are starting to see a proliferation of “reduce motion/turn animation off” UI experimentation ranging from discreet toggles to preference panels. Like the “mute audio” option, one or two of these will likely rise to the top in a few years as the most efficient and widely recognized.

As more edge cases reveal themselves, UX and accessibility concerns will deepen. If left unaddressed, the company’s front end will carry extra technical debt forward to be addressed “another day.”

Animation matters#section7

Since animation’s return to the web development and design toolkit, we’ve been using it to tell stories and entertain; to increase the perceived speed of interactions; to further brand ourselves and our products; and to improve our users’ experiences. And we’re just getting started. New specs like scroll snap and motion paths build upon the foundation of web animation. New tools and libraries are coming out every day to help us further enrich the sites we create. And more and more job postings request familiarity with CSS animations and libraries like GSAP.

As the field of web animation expands, it will be abused. The next parallax is always just around the corner; as new and unusual trends proliferate, clients and managers will want to see them reflected in their sites. Hopefully we learned something in those years without Flash; good design is about more than chasing after trends and trying to impress each other or a segment of our audience. We learned that building terrific web experiences means listening to users as well as pushing the web forward. And if we listen, we’ll hear when the bouncy buttons are too much.

15 Reader Comments

  1. What a great roundup, a “State of Animation 2016!”
    🙂

    Any thoughts on P5js, or any of the many game development engines, like Pixi.js?

  2. I’m excited about P5.js. Seems like the perfect summer learning adventures. As for game dev engines, I’d love to know what everyone else thinks!

  3. You’re definitely right, Rachel, that “terrific web experiences means listening to users”, but very often users don’t even know what they want and they’re happy to experience something new. Thank you very much for your summary. Great post.

  4. This really sums up the state of the web when it comes to adopting and using SVG.

    This technology, along with custom fonts for icons, makes it looks like image sprites are on their way out (or pretty much as soon as retina came along).

    Resulting in a cleaner, fast loading, more accessible web.

  5. The past year we’ve noticed our clients leaning more towards the use of animations to present content. Definitely makes content easier to view from a mobile perspective as it makes better use of space.

    Interesting article. Thanks.

  6. yah, i am fully agree with you. Animation is becoming more famous than previous years. Today is time for Digital Content marketing.
    Thanks

  7. I wanted to respond with something snarky, but as I tell my little ones, “Improve your attitude.” So I’ll do the same. 🙂

    I come from the world of heavy animation, high production values and animation-centric programming of yesteryear, when Flash was in it’s hay-day. Looking from those times to now, the web has went backwards in design, animation and overall coolness.

    I often end up scratching my head when clients get excited over animated gifs, parallax scrolling animations or any of the other gimmicky things found on the web today. As an artist the web is no longer a canvas that really holds any true inspiration. 96% of the web, today, is glorified style frames.

    Flash doesn’t need to come back, but right now the learning curves to implement good WebGL or other type of animations/environments are nowhere close enough to be widely adopted and pushed into production environments, unless you have some highly skilled programmers or folk really knowledgeable about that niche.

    When you have sites that are so heavy in JS that it slows down the browser way more then Flash did – there is a problem.

    The beauty of animation is it’s ability to convey emotion and narrative which is pertinent in getting the attention of clients or your desired audience.

    I’m excited to see where animation/motion will go on the web, but I’m not holding my breath as I feel like standards, stubborn mindsets and technological approach-ability are all still a major hurdle to ‘the web’ moving forward in this fashion.

    But, prove me wrong – let the goodness of moving pixels reign! 🙂

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Nothing Fails Like Success

Our own @zeldman paints the complicated catch-22 that our free, democratized web has with our money-making capitalist roots. As creators, how do we untangle this web? #LetsFixThis