How to debug web animations

The speed of some animations can make debugging tricky. Here, seven developers reveal the tools they use to dig into code and fix any issues.

Developers reveal how they debug web animations

Squashing bugs in your animation is a chore, but it has to be done. Follow these top tips for an easier time!

Want to learn how to push the animation boundaries? Sarah Drasner will be demonstrating how to create intricate SVG animations at Generate San Francisco, while Val Head will discuss motion in design systems at Generate Sydney. Book now to qualify for a discount!

Flash may have fallen by the wayside a long time ago, 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're going to have to roll up your sleeves and get debugging. Here some leading developers reveal their secrets for ironing out all the bugs.

Steven Fabre

"Generally speaking I like to use the Chrome 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 to your text editor, you can now change the animation's speed and easing with a slider and visual cubic-beizer 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."

Dudley Storey

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."

Sarah Drasner

Senior UX engineer Sarah Drasner will be demonstrating how she creates amazing and intricate SVG animations at Generate San Francisco on 15 July. Her top tip for debugging JavaScript animations? "I usually use GreenSock," she tells us, "which comes equipped with timeScale(value) . This handy function allows me to slow a whole timeline down so I can see how things are interacting. There's also , which allows me to find a specific place in time. The longer the animation, the more helpful this tool will be to your workflow."

Patrick Brosset

"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.


Learn about web animation from the experts at this year's Generate conferences. Book now for a discount!

"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-beizer 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 now allow you to do just this."

Rachel Nabors

"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. I'm also looking forward to trying out Chrome (Canary) DevTools' new user timing measures to measure the performance of specific groups of animations at a time."

Val Head

Web motion designer Val Head is another fan of Chrome and Firefox's new developer animation tools. "These new 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-beizer 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."

Bryan James

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."

Learn how to create intricate SVG animations with Sarah Drasner at Generate San Francisco on 15 July. Val Head discusses motion in design systems at Generate Sydney on 5 September.

Hurry! Limited discounts are available now for all three Generate events, saving you up to £100; get your ticket today!

This article originally appeared in net magazine issue 279; buy it now!