How to debug web animations

Animations can be tricky to debugging. Here, seven developers reveal the tools they use to dig into code and fix any issues.

Want to learn how to push the animation boundaries? Rachel Nabors will discuss the web in motion at Generate San Francisco on 9 June, and Sara Soueidan will present practical frontend solutions for creative design challenges at Generate New York on 28 April.

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 the tools they use to iron out all the bugs.

Developers reveal how they debug web animations

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

1. Chrome's Inspect Element tools

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

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

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

04. GreenSock

GreenSock offers a suite of tools for JavaScript HTML5 animation

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

05. Trial-and-error

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

At Generate San Francisco, Rachel Nabors will explain how animation helps people interact with touchscreens and how those same principles apply to the web

06. Canary animation inspector

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

07. Your own 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."

Rachel Nabors will talk about the web in motion at Generate San Francisco on 9 June, a one-day/two-track conference covering adaptive interfaces, performance, design systems, prototyping, and more. Speakers will come from Netflix, Uber, NASA, Microsoft, Twitter, Salesforce, and many other innovative companies. 

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