What is web animation? Rachel Nabors explains it all.

Web design and motion design have been on a collision course since the early 2000s. Today, they’re finally merging, spawning strange new fields — and the terminology to go with them.

One term that’s been gaining steam is “web animation.” Like “motion design,” it’s a chimera that can shift meaning according to the context in which it’s used. To understand it better, we turned to one of web animation’s most prolific and inspiring evangelists, Rachel Nabors.

Rachel Nabors, interaction developer and award-winning cartoonist

As a cartoonist turned interaction developer, Rachel has written for numerous respected outlets like A List Apart, 24 Ways, Adobe Inspire and Smashing Magazine and traveled the world to speak about the role that motion plays in crafting great user experiences.

Understanding Web Animation

What is web animation, exactly? Are we talking about UI animation or more traditional animation (i.e. character-driven stuff) being executed with web-friendly code (HTML, JS, CSS)? Or both?

Everyone has a sightly different mental image of “web animation.” In UX design, the preferred term is “UI animation,” but in front-end development, you’ll hear “CSS animation,” “JavaScript animation” and even “HTML5 animation.”

But “web animation” is an umbrella term for all these things:

• web-first technologies like CSS, JavaScript, HTML, Canvas, WebG, SVG that don’t require plugins.
• using said technologies to animate things from dashboard drawers to games to data visualizations.

Speaking of terminology, one interesting trend I’ve noticed is that people working in the web development industry are starting to conflate “motion design” with “UI animation.”

Now, there’s more to UI animation than just motion. There are many properties that can be animated that do not involve movement (opacity, color, blur, form). What’s more, we’re seeing some major accessibility concerns surface in the face of motion-heavy design (see also: vestibular disorders). These issues often can be addressed by animating alternative, non-moving properties.

Sadly, “Motion Design with CSS” seems to sell better than “UI Animation with CSS,” so don’t expect this trend to go away anytime soon!

How do web animation and interaction design overlap or relate to each other?

Web animation refers to a set of native browser technologies (see above). Interaction design is platform-less and technology agnostic: it’s more about the interaction than the medium. In that regard, the two have a lot of overlap.

illustration by Rachel Nabors

You can totally use web animation while working on an interaction design project. For instance, using animated SVG charts to show users a correlation between their breathing and heartrate. I just love seeing what happens when these two come together!

And in that regard, I think web developers and designers interested in web animation are looking closely at their colleagues in interaction design as role models. So, no pressure.

The (Premature?) Death of Flash

I think many people hear “web animation” and they immediately think of Flash (provided they are old enough to remember it).

Flash was my first animation tool, so I have a weird respect for it, even though it quickly became associated with terrible experiences of all kinds. What are your feelings about Flash and its place in the history of web animation?

I think it’s easy to pick on Flash. For a long time, Flash developers were rockstars and front-enders toiled in their shadow. So I think when Flash was on the decline, front-end enjoyed no small amount of schadenfreude over its demise. It was as though every ideal they held true was being vindicated: the hour of the open source, cross-platform free web was nigh!

But Flash was the First. And to this day, there’s no easier way for storytellers like cartoonists to make interactive artwork. I still see comics with interactive portions being syndicated in Flash.

Flash’s graphical user interface is advanced. It doesn’t require a bunch of build processes and niche knowledge. And let’s be honest: most cartoonists do not know about nor care about why the web development community doesn’t like a format that works great for them and their readership.

But, for those who do want to transition to that ideal web platform, there’s little by way of stepping stones.

The Internet: Big Boys Only

I feel another reason Flash gets picked on is because some folks think it “lowered the barrier to entry” for a lot of designers who made terrible sites. This thinking grinds my gears.

First off, the Internet isn’t about keeping people out. This isn’t some exclusive “Big Boy Designers/Developers Only” treehouse. I look at plenty of sites that have atrocious typography and layout, but I don’t advocate that devs shouldn’t have access to CSS layouts and fonts or they’ll imperil the natural beauty of the unsullied Web.

We’re all on a learning curve. Some of those curves look less appealing in hindsight than others. But you gotta get on somewhere.

Secondly, we’re making a lot of the same UX mistakes Flash sites were known for — without Flash! Now that we can use native HTML APIs and elements, autoplaying video and music has resurged in popularity. (My new favorite drinking game: visit the CSS Awards site and take a shot each time you find a site that auto-plays media.) But these sites are getting praise, awards even, from the design community.

We learned a lot of lessons in our little timeout from Flash. We learned how to respect the user, to ask permission; we improved layouts, typography, even learned how to design for unpredictable browsers and viewports. I’d hate to see that swept aside in an eager bid to win clients with more “razzle dazzle.” But so be it.

Flash wasn’t the problem.

We are.

It seems to me that Flash was killed a bit prematurely. HTML5 and attendant technologies weren’t quite ready to take its place when Steve Jobs sent his infamous open letter, were they? Or was that exactly the push the web needed to abandon Flash?

I love that animation is now a real tool in our web development tool chest. Native environments have had animation forever, and it’s so good to have it out of the sandbox of Flash and into the browser where it can be orchestrated deftly alongside all the other native technologies.

But there are still things web animation can’t do as well as Flash could. In fact, experienced Flash devs will be quick to spot shortcomings in things like the Web Animation API that green developers wouldn’t think about.

But I don’t think web animation would be as far along today as it is if Steve Jobs hadn’t made that break back then.

There’s a lot of niche knowledge buried with Flash, and we’d be smart to dig it back up.

Motion design and web animation

From your perspective, why should motion designers care about web animation? (Should they care?)

If you want to go a more cinematic route, web animation isn’t going to make or break your career. If your dream is to have a portfolio full of Vimeo videos of your work, don’t worry about CSS or JavaScript or any of that.

However, if you want to do interactive work, make things respond to inputs, build interfaces or visualize data, create a game that walks the line between site and music video, you would do well to keep tabs on web animation.

The Web is the largest experience distribution platform available to our species. What’s more, web animations can be used in web apps which can be bundled for sale and distribution as native apps or sold on in marketplaces that support web apps themselves such as the Chrome App Store.

Right now you need to know a lot to stay on top of web animation, but those who are in the know are sought after and well-compensated for their efforts. It’s the wild west out here and a very rewarding place to be professionally.

(Also, if you’d like to keep on top of said wild west, might I recommend my carefully curated Web Animation Weekly newsletter? It’s like a ray of sunshine every cloudy Monday morning.)

What is the web for?

When you were interviewed by Jen Simmons for The Web Ahead, I felt like maybe she was arguing that the web was not “made for” animation. Around the 24 minute mark, you said (and I agree) that the web is not supposed to just be a giant repository of text documents.

The lowest common denominator when it comes to accessibility and archivability is text. It can be seen, read aloud, and translated. It is easy for computers to parse and for algorithms to search. But humans can take in so much more than text. We are visual, hearing, thinking creatures. We have all these senses to tap into.

Around 29:00, Jen said that the web is “content in a format that will outlast all of us… not until, oh, the new OS comes out and then all the software has to be replaced.”

I feel like not all experiences on the web do need to last forever. If everything we put on the web has to be future-proof, then aren’t we really limiting what we can do with it?

What I love about web animation is that now, animations will last as long as we have browsers as we know them. This means the interactions you create today can still be enjoyed by your children tomorrow.

For digital publishers, this is an ideal format. The more universal the format, the easier it is to send into other markets. The more copies of something that exist, the longer its cultural half-life. Physical media rots, degrades, but with enough digital copies being shared on enough servers, a creation has the possibility to last forever.

This is a sort of Western ideal: the hero, carved in stone, outlasting the civilization that erected it.

But there is an alternative: we make something and it degrades or disappears, ephemeral like apple blossoms in the spring or a summer music festival. And there is something beautiful about making something that will be gone one day, outgrown and discarded. Its scarcity makes it precious and appreciable only to those who understand its value.

I don’t imagine even HTML will last forever. Decades perhaps, but eventually we will have to port all the old formats to the new, and those things that we don’t value enough as a society to spend that time on will be culturally left behind, like old silent films.

But since so much of the web is in HTML already, I suspect it will be one of the easier format conversions in history as many porting tools are bound to crop up to serve that massive user base.

So should everything be future-proof? It depends. Are you carving a monument or planting a tree? One is set in stone until destroyed by time. The other will be maintained, changed, updated until it fulfills its purpose and dies.

Relevant Talks

Sign up for Rachel’s Web Animation Weekly newsletter and dig into her website, which holds things like Alice in Videoland, a visual storytelling experiment made for Adobe Inspire.