How to debug web animations

[Rss Bot 1]

Squashing bugs in your animation is a chore, but it has to be done

Flash may have fallen by the wayside, but animation on the web is bigger than ever, and it's at the forefront of providing a compelling user experience. But whether you're using JavaScript, SVG or CSS3 animation, at some point you'll have to roll up your sleeves and get debugging.

Here, some leading developers reveal the tools they use to iron out all the bugs.

1. Chrome's Inspect Element tools

Chrome's DevTools include tools to inspect elements

"Generally speaking I like to use the Chrome DevTools Inspect Element tools, which are getting better every day," says Easee founder Steven Fabre. "Instead of typing everything manually or doing the back-and-forth from cubic-bezier.com to your text editor, you can now change the animation's speed and easing with a slider and visual cubic-bezier graph editor. 

"Once I'm happy with the timing and easing of the animation, I like to enable paint flashing to identify and fix elements that may potentially make the animation jerky."

02. CodePen

CodePen will flag any syntax errors

Designer and developer Dudley Storey reduces the need for debugging from the start. "I avoid typos by writing CSS animations in Sass," he tells us, "using either CodePen or CodeKit – both of which flag syntax errors.

"If I am stuck with an unexpected result, I work backwards: one simple check is to set my CSS animation(s) to a single to { } declaration, which allows me to ensure the elements I'm animating can actually reach their final states."

03. Firefox Developer Edition

Firefox's Developer Edition is packed with debugging tools

"CSS animations and transitions can be tricky to debug," says web animations advocate and consultant, Rachel Nabors, "especially in UI animation, where the movement is often very quick. That's why I like Firefox Developer Edition's animation tools so much. 

"In the animation panel, I can scrub through an animation or even a group of animations to see what's actually happening. If an animation has already run, I don't need to refresh the page, just back that playhead up."

04. GreenSock

GreenSock offers a suite of tools for JavaScript HTML5 animation

Senior UX engineer Sarah Drasner has a top tip for debugging JavaScript animations. "I usually use GreenSock," she tells us, "which comes equipped with timeScale(value). This handy function enables me to slow a whole timeline down so I can see how things are interacting. 

"There's also timeline.seek(value), which enables me to find a specific place in time. The longer the animation, the more helpful this tool will be to your workflow."

05. Trial-and-error

At Generate London, award-winning web animator Chris Gannon will share his processes and explore some of the tools he uses to build them

"Animations play an important role in user interactions," notes Patrick Brosset, DevTools engineering manager at Mozilla. "Specially crafted animations not only look good but can help users make sense of changes in a user interface. Getting the perfect animation, fine-tuned to progress and last just the right way, is a trial and error process.

"Tooling is key. Debugging animations requires you to be able to see and edit CSS key frame rules right in the browser, and live edit complex cubic-bezier curves. But more importantly, being able to pause, seek, slow down or speed up an animation and edit its properties at any time is essential. Both Firefox and Chrome's developer tools enable you to do just this."

06. Canary animation inspector

Web motion designer Val Head is another fan of Chrome and Firefox's developer animation tools. "These animation inspectors have saved me loads of time," she reveals. "I use these because they have the most features (though some are experimental). Both have visual timelines and cubic-bezier editors for individual animations. 

"Canary's animation inspector is my current favourite. The editable timeline, playhead scrubber, and playback speed control let me get a really good look at what's happening in the code."

07. Your own library

Bryan James's website shows he has a large library

Freelance interactive designer and creative coder Bryan James takes a more organic approach to ironing out animation errors. "I don't debug animations in any particular way," he says, "it's purely trial and error. Recently, I've started using my own small personal group of transition sets that I tend to stick to, so I'm getting quicker at spotting errors with just my eyes. 

"My transition set is a group of variables declared as descriptive names, for when particular eases are necessary – akin to the standard set of ease-out, linear and so on, but a lot more bespoke and varied."

This article originally appeared in net magazine issue 279.

Want to learn how to push the animation boundaries? Award-winning web animator Chris Gannon will dissect some of this work at Generate London on 21 September, while Leonard Souza will demonstrate Webflow's new Interactions 2.0 feature the next day. The event will also cover web performance, UX strategy, accessibility, responsive components, adaptive as well as conversational interfaces, user research, prototyping and much, much more. Reserve your spot now!

Related articles:

• 5 steps for mastering web animation
• 21 top examples of JavaScript
• 10 impressive examples of CSS3 animation

View the full article