Web Animation at Work

When I left my job last April, the plan was that I’d use my fancy CSS3 animation tricks to land a front-end development position at an agency in New York. But as I spoke at more and more conferences and interviewed at more and more companies, I realized I would never be satisfied working as a traditional front-end developer. I am not excited by Angular.js. I don’t want to be the gatekeeper to another massive repository of stylesheets. I don’t stay up all night building Sass extensions. (Well, except for the one I built to help calculate keyframe CSS animations.)

Only one area of development truly thrilled me: interaction. Canvas, SVG, the web audio API, webGL—CSS3 animations were just the beginning of my fascination. I started to see the browser as something more than a document reader, the internet as more than a series of linked documents.

We use HTML to tell stories and communicate vast amounts of information—and animation helps us do both better. Just as hierarchy guides users through content, animation guides them through interactions by helping them understand relationships, structure, cause, and effect. Animation shouldn’t be a nice-to-have. It is critical to communication.

Another layer of information#section2

Animation is powerful because it can create the “illusion of life.” This means taking into account physical things like gravity, reaction, squash, stretch, and timing. There’s a reason Disney’s animated masterpieces look and “feel” better than their cheap knock-off counterparts. Reality is rich with sensual input that informs our brains about where we are and the things around us. Translating even a fraction of that information into a two-dimensional medium can help users infer more information about what they’re looking at and how it relates to the information system it inhabits.

With the rise of flat design and the UX stumbles that have come with it, we’ve seen just how dangerous it can be to strip visual cues from a site’s components. Animation can be used to the opposite effect. With proper application, animation can indicate:

Causality:#section3

When one thing happens just before another, our brains infer that the two things are related and that the first caused the second. For instance, when you click a submit button and the form disappears, you infer that you’ve caused the form to react, not that it was on a timer that coincidentally was set to disappear at the same time you clicked button.

Feedback:#section4

Where causality can be inferred between two events without human input (like a loading spinner disappearing when the movie is ready to play), feedback is when something indicates to a user that their actions have triggered a response, like buttons that appear to depress when activated. This animated skeumorphic reaction to user input tells a user, “You pressed the button.” (Remember when people would press payment buttons over and over again?)

Relationships:#section5

Animation can underscore where things are hierarchically and spatially in relation to one another and which things are possible to you, tying together where you’ve been, where you are, and what you can do. For example, when you open an app in your iPhone in iOS7, it zooms into the app instead of redrawing the page as in iOS6. Now you remember where that app’s icon is on your main screen, making it easier to find again.

Progression:#section6

Keying in again on relationships, animation can show you your progression through a linear sequence. We’re most familiar with the classic “loading bar.” Consider also the indicator on a GPS unit or map app, showing your progress along a road. A series of still snapshots of the road as you proceed down it would be harder to follow.

Physics:#section7

Showing how virtual things would react in the real world is an active skeuomorph. As an example, when something “falls” down the screen, the movement will be more believable if the animation gains speed over time, as falling objects accelerate under the effects of gravity. Making an action “feel” real helps users buy into your skeuomorphs.

Transition:#section8

These are a truly human invention: the crossfade from one scene to another in a film doesn’t have a natural counterpart. But transitions are invaluable for indicating changes of mindset, setting, or task, and most people have been trained from television and movies that the things following a transition are more or less tangentially related to the things that preceded.

Animation as an enhancement#section9

When Coin launched its preorder site, thousands opened their wallets to welcome it. After enjoying the site’s animated demonstrations at various resolutions, I noticed how little marketing copy it has—instead, it uses a few animations and videos to show instead of tell. What copy remains is carefully selected and doesn’t detract from the experience. The animations require less bandwidth to download than videos, and less commitment from the viewer: there’s no button to press; they simply appear as you scroll.

These interactions aren’t limited to advertising scenarios like the latest Mac Pro or FiftyThree’s Pencil. Even in copy-rich situations like Polygon’s review of the X-Box 360, the added animations make the content “come alive” by animating simple line art illustrations. The navigation uses subtle animations to help you see where you are in the article in relationship to the other sections. The New York Times has been making valiant forays into interactive storytelling, from its in-depth coverage of the 2012 Olympics to articles like “A Game of Shark and Minnow.”

From desktop to touchscreen and back again#section10

Back when RAM came in megabytes, animation wasn’t common outside of games (and even then, it was often crude and primitive). Users were subtly conditioned to take mental “before” and “after” pictures while taking an action like opening a menu. Then their brains would work overtime to follow what happened between pressing the mouse button and the menu appearing. This slight disruption can disorient a user as they shift from imagination to task completion. As interfaces became more complex, that disruption increased. Animation helped to connect the dots between those states, as computer interaction researchers Scott E. Hudson and John T. Stasko noted as far back as 1993:

Today, small, powerful touchscreen devices are forcing us to stuff interfaces into tiny spaces—smoothly. This is why we’re relying more and more on the Z-axis: layers, sliding panels, sides, zoom. But spatial relationships like these are hard for the mind to compute using the old-fashioned “snapshot comparison,” so “in-betweening”—animating between the before and after states—keeps users from becoming confused or frustrated.

Given the proliferation of small devices, such design patterns are unlikely to go out of fashion anytime soon. In fact, large-screen experiences are now adopting them, overlaying and manipulating information in three dimensions—as you can see in the new Famo.us framework’s demo.

Paved with good intentions: support, performance, and responsibility#section11

These kinds of interactions are bleeding edge. They cost time and money to develop and support. Not all browsers support CSS animations, SVG animations, the canvas element, and their friends yet. And even when the browser claims feature support, the devices running them may not be powerful enough to deliver a smooth experience. The vendor’s implementation may be buggy. There’s no one-size-fits all solution. You have to do your research, pick your battles, and adopt mitigation strategies.

It’s paramount to know and use the most efficient animation techniques and test on real devices. If at all possible, get data on the sort of browser and device traffic you can expect. It makes little sense to invest time in interactions not suited to the audience.

To an extent, we can fall back on our old friend progressive enhancement. Using tools like Modernizr, it’s possible to target browsers that don’t support your animation and serve them a polyfill or something static to chew on instead.

But performance is a real issue, especially on underpowered devices with high-definition displays. Often their heads are too big for their bodies: their processors don’t have the power to redraw the screen fast enough to be jank-free. Jank kills the precious illusion of life. At this time, your options are limited:

1. Optimize your animations. If the animation is janking up, get out your dev tools and start analyzing the timeline. You may have to alter your design to make repaints easier (gradients and shadows are notoriously costly to animate).
2. Offer an alternative. If you’ve optimized as much as possible, yet there are still some device and browser combinations whose poor animation support makes the experience unusable, then consider using device sniffing to cherry-pick those combinations and offer them your no-animation alternative.
3. Cater to a specific market segment. Some developers have the luxury of only serving a certain number of devices and browsers without worrying too much about a minority of users. For instance, developers who build HTML5 apps for Firefox OS or Kindle Fire don’t need to worry about IE 8 traffic, while developers working on an intranet where access is limited to certain secure browsers might not need to prioritize Android. There are times where providing a better experience for the majority outweighs catering to a minority, which is why it’s so important to know your traffic. But, if you have a large and even moderately varied audience, even your minority can be a majority.
4. Don’t do it. Sometimes it’s too soon. We look back with disdain at the Flashy, difficult, or pointless microsites of yore, commissioned by clients with what my mother might call “more money than sense.” And for good reason. It’s easy to get so caught up in the giddy delight of making the web come alive that we lose sight of the most important person in the room: the audience. But when we focus on our users, their needs, and their potential device limitations first, we can make smart interaction decisions that push the state of web animation forward without forgetting that just because we can, doesn’t mean we always should.

So you want to be a (web) animator?#section12

Whether you’re a web designer or a front-end developer, investing in animation skills and theory will help you finesse your designs and interfaces. Fortunately, old-school animation has had decades to mature into an art form replete with educational materials and techniques handed down from the masters.

One of those is storyboarding. On large projects, you need a bird’s-eye view of the many paths an interaction can take. Disney’s animation studio first created storyboards: large, movable corkboards on which animators could pin illustrated scenes to lay out a story’s progression along a timeline. The illustrations could be removed and added as the story developed, and the board could be toted to different locations for different teams to work on. For the web, you’ll typically want to build non-linear storyboards around the different paths an interaction can take, which can be done by devoting different boards to different sets of actions and reactions.

Storyboards improve collaboration by clearly communicating what happens when and how, and they are perfect for early stages of exploration when you don’t want people getting too attached to one particular design. They help get people thinking about motion earlier, too. Movements are drawn directly on the board with colored arrows and delightfully descriptive phrases like “pan” and “zoom in.” There are many books on the topic (my favorite being Storyboard Design Course: Principles, Practice, and Techniques), and sites like Skillshare often offer affordable courses taught by world-class storyboard artists.

Learning animation theory itself is also entertaining. (It’s also a great excuse to sit down and watch some classic cartoons for “educational purposes”!) I recommend starting with Tezuka School of Animation Volume 1: Learning the Basics. It is concise, covers the most important concepts, and won’t take up a lot of time. Have more time? Check out my ever-growing list of animation books on Goodreads. If there’s an animated film that really speaks to you, try to find an Art of… book about it—they’re usually loaded with storyboards, animation details, and design decisions. (Right now I’m all about The Art of Frozen!) Even if you don’t consider yourself a designer, getting familiar with these terms will bring you closer to those you work with.

Familiarize yourself as much as possible with CSS animations and transitions, SVG, canvas, the web animations API, web audio and video, and even the WAI-ARIA spec. (How does that audio sound when muted?) Sites like MDN make great reference material, while HTML5 Rocks covers many poorly understood APIs. Codrops showcases experimentation, and Kirupa.com covers CSS animation more deeply than anyone else. O’Reilly’s books are the gold standard, but it also helps to follow recognized names working, speaking, and writing in the fields of interaction design and HTML5 game development like Val Head, Pasquale D’Silva, Jesse Freeman, Seb Lee-Delisle, and even yours truly.

Many developers and designers have also been giving hooks for animation events to frameworks like Angular.js and building animation-capable prototyping tools like Framer. Libraries like D3 can take the mystery out of generating SVG charts and their transitions. For page-based animations, several companies offer visual user interfaces that ease timeline manipulation, from Sencha’s Animator to Adobe’s Edge Animate to Google’s free (albeit ad-oriented) Web Designer.

You don’t need to use all these techniques and tools every day; you just need to know which ones are better suited to which tasks. For instance, canvas is an accessibility nightmare, as it is essentially an image tag that lets you shuffle its pixels however you like. It’s not suitable for infographics or interfaces, but SVG- and CSS-based animations can still be used with materials that need semantic value on a page. If you think you need sound and animation together, consider a video tag. But if you need to decouple those elements, canvas and web audio might be the way to go.

Rather than attempting to master every API you find, spend some time playing with a few things. Find ways to apply them to projects, and gain a broad yet shallow knowledge of many techniques. Then you can master the right tool for the right circumstance when it presents itself. You don’t need to read a dozen huge books on any one technique. Even one small yet authoritative book, like Boris Smus’s Web Audio API, can teach you plenty and reinforce the things you already know.

Let’s get to work#section13

Animated user interfaces can be powerful—so powerful that they offer a competitive advantage to their products, regardless of platform. I am so convinced of this future that I’ve decided to put my money where my mouth is and start my own company, Tin Magpie, to specialize in building stunning interactions and telling better stories with code. I hope more of you will join me. I can’t wait to see what you create.