Things are moving fast. So let’s recap.
Web Animations API coverage increasing#section2
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.
SMIL falls as SVG rises#section3
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.
Prototyping solutions fall short#section4
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.
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#section5
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.
Motion guidelines adoption up#section6
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.
UX and accessibility#section7
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.”
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
What a great roundup, a “State of Animation 2016!”
Any thoughts on P5js, or any of the many game development engines, like Pixi.js?
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!
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.
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.
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.
Great web animation concept thanks for sharing this!
Web animation is more and more important. Clients also know it, but not everyone. Your article is very good, thanks.
Thanks for the excellent article. We have more and more clients asking for animations.
yah, i am fully agree with you. Animation is becoming more famous than previous years. Today is time for Digital Content marketing.
Thanks for taking the time to write this article! Great piece
Web animation is more and more important, in particular,for the Designer Women’s Handbags And Wallets
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! 🙂
Next step is to integrate sounds for every animation!
Web animations are very important in web design. We also use it for our website floridarentalsbyowners
I think I have never seen such blogs ever before that has complete things with all details which I want. So kindly update this ever for us. 21 Questions
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
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions