New animation controls in Chrome Canary

Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations.

To try these out for yourself in Canary, open up Dev Tools and go to Styles tab under Elements. Look for the play button in the far right and you’re off to the races:

Screen Shot 2015-01-06 at 12.10.45 AM

From there you can set the global animation speed to 1x, 0.5x, 0.25x, or 0.1x of the existing speed for a closer look. Or pause and play all the animation on a page to your heart’s content.

A quick test shows these controls work on CSS Animations, CSS Transitions, and Web Animations API animations. (They don’t work with JavaScript animations as far as I can tell, but if you find different results let me know.) UPDATE: It’s been confirmed that these controls don’t work on requestAnimationFrame animations. But hey, it still covers a lot of ground!

I’m really happy to see tools like this showing up in browsers! Chrome aren’t the only ones working on this sort of thing. These controls are a first step to something bigger but they’re already a big help. (Thanks to Paul Irish for letting me know this was out!)

(01/13/2015) ETA: Firefox now has some nice looking web animation inspection tools too! Check out this preview from Patrick Brosset

  • Lukyvj

    Dope ! Can’t wait to use it directly in Chrome, instead of Chrome Canary.
    Still a good thing to know tho, thank you for sharing Val !

  • Matthew Felgate

    Great news!

  • Hell yes, is next step going to be a transforms editor ?

  • valhead

    I’m not sure about that, but I’d love to see some easier ways to inspect & adjust transforms too!

  • zehfernandes

    Hell yes!!
    I started develop a jquery plugin to do similar things ( play, pause, reset, speed)
    Now i don’t know if i continue or just wait haha!

  • Chris Mulson

    not seeing this in chrome canary on windows, anything (flag?) you need to enable to see this?

  • valhead

    No flags required as far as I know. Although I know I already had the “Enable experimental Web Platform features” flat enabled for other things. Give that a shot? Also make sure you’ve got at least Canary 41 if it’s not auto-updating. Hope that helps :)

  • Chris Mulson

    works for me now, i forgot to click the button! thanks!

  • valhead

    Happens to us all :)

  • digitalmaster


  • Thiago Lagden Magalhães

    See this video… Paul has a tab animation in your devtools…
    I thought was that stuff!! :(

  • valhead

    Yes! Paul previewed a fancier version at the Dev Summit. I’m pretty sure that’s what’s coming next. Or maybe even something fancier!

  • Pawe? Grzybek

    nice one. I didn’t know your blog before. Now its added to feedly of course :)

  • cool!

  • Perfect, thanks for highlighting this :)

  • Pingback: Render Conference 2016 sessions – IS Applications Development Services()

  • lake2

    not seeing this tool on chrome canary 55

  • valhead

    This animation inspector is in regular Chrome now too if you want to use it there. Although, they’ve changed the icon to be two overlapping diamond shapes. I’m on Chrome 52 now, not sure when they changed the icon exactly.

    It does look like they’ve moved it in Canary (55) as you noted. You can get to the Animations inspector in Canary by going under the “…” menu, then to “More tools”. Animations is listed under there in Canary 55. It’s definitely a lot harder to find there. Hopefully it’s just a temporary re-location.