Watch Transitions in Slow Motion in Chrome’s DevTools
source link: https://blog.jim-nielsen.com/2023/slow-motion-animations-with-chrome-devtools/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Watch Transitions in Slow Motion in Chrome’s DevTools Jim Nielsen’s Blog Verified ($10/year for the domain) Archive About RSS Theme: blue red green yellow purple
Fidelity:
Controls the level of style and functionality of the site, a lower fidelity meaning less bandwidth, battery, and CPU usage. Learn more.
Default Minimal Text-Only
Watch Transitions in Slow Motion in Chrome’s DevTools
2023-06-01
For those of you about to do view transitions, I salute you!
And I pass on this super useful (perhaps obvious) piece of information I received from Bramus: watch your animations play out in slow motion using Chrome’s devtools.
I’ve been working on view transitions on my icon gallery site but was running into an issue where going from page A to page B worked fine, but then hitting the back button was causing this super weird flash of content and transitions.
I couldn’t tell precisely what was happening, so I did a screen recording of the page transitions and then scrubbed through the recording frame-by-frame to analyze what was happening.
Turns out, hitting the back button from page B to page A would:
- Jump from B to A instantly
- Jump from A back to B instantly, with B now visually missing the element it was supposed to transition from
- B cross fading to A, but A now visually missing the element it was supposed to transition to
- Once the transition was entirely complete, the element we were transitioning to would pop into place instantly
This all happened so fast it was impossible to perceive without watching things in slow motion — hence my screen recording.
Bramus jumped into the fray and solved all my problems by 1) noting this was a bug in Chrome (thus relieving me of the feeling that I was incompetent), and 2) clueing me in on the “Animations” panel in Chrome’s devtools.
The animations panel lets you slow down the animations happening in the browser so you watch them play out at much slower speeds and troubleshoot the mechanics of the animation.
To do it, open the console drawer (ESC
), then choose the “Animations” panel from the “More” menu (vertical three dots). Or, open the Animations panel from the command palette (CMD
+ Shift
+ P
on Mac) and search for animations.
From here, you can set your animation speed and watch the animation play in slow-mo!
Absolutely yuge shout out to Bramus for helping me out on this one. As view transitions become more and more prevalent, I anticipate the Animations panel becoming one of my top-used features of the devtools.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK