How to inspect animations #DevToolsTips

Опубликовано 11 августа 2022, 17:07

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:
Demo → goo.gle/3vT4Rc4
Animations tab → goo.gle/devtools-animation

Questions? Tweet to us:
Jecelyn Yeen → twitter.com/jecfish
Chrome DevTools → twitter.com/chromedevtools

Catch more DevTools Tips → goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer