How to inspect animations #DevToolsTips

You can use the Animations tab in DevTools to inspect, scrub and modify animations.

Learn now on today’s episode of DevTools Tips with Jhey and Jecelyn.

Chapters:
0:00 - Intro
0:52 - Open the Animations tab
1:14 - Record a single animation
1:26 - Adjust the replay speed
1:32 - Scrub (Preview) an animation
1:48 - Record and debug multiple animations
2:13 - Adjust the easing with easing preview
2:47 - Adjust the animation timeline
3:21 - Modify infinite animation
4:26 - Learn more

Links:

Questions? Tweet to us:

#DevToolsTips #Chrome #Developer

[ratlamking]

I did not know this existed. Great video. You guys are awesome.

[lalivirtei]

Great video, thanks. Btw, if Google would allow you guys to stop pretending that you have so much fun with it, I may finally get rid of the embarrassment that was distracting me the whole video.

[GRA]

These videos are so corny I love them so much 😂 they also have so many useful tips

[ColorCode-io]

It would be great to be able to see frame drops with the animation inspector.

[ibrahimkarabulut]

I want to ask somethink why you are not make a code editor or web editor like browser inspect

[tinashedosvora]

Can this be done on live moving animation on other websites

[thenewyorkean]

but what about JS animations? You only speak about CSS here?

[KylanHurt]

Honestly the animations tab is so hard to use. I'm surprised you guys released this junk. Either that or I'm using it incorrectly.

[jg-jsbg]

HOW TO INSPECT ANIMATIONS | DEVTOOLS TIPS