Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
Move elements around the DOM while preserving their state with moveBefore
Move elements around the DOM while preserving their state with
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
View Transitions Snippets: Getting all Animations linked to a View Transition
Experiment: Automatically trigger a View Transition when a JavaScript Property of an Element changes
Tricking a MutationObserver into observing changes to IDL attributes by syncing the IDL attributes to their Content Attribute counterparts.
Misconceptions about View Transitions
Post I wrote a while ago for Chrome for Developers, about some misconceptions about View Transitions that are making rounds.
Animatable Accordions (2024.11.27 @ devs.gent)
Talk on animating the <details> element with transition-behavior: allow-discrete , interpolate-size: allow-keywords, and ::details-content.
The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident()
Uniquely name a bunch elements in CSS in one go! Instead of assigning 100 unique names through 100 declarations, write only 1 and use ident() to construct the names.
Re-imagine the web with View Transitions
Video from Chrome’s 2024 EOY campaign, highlighting View Transitions. I made sure the code snippets and animations that you see where Technically Correct™ + coded up a POC for this one (link to demo included).
Spot Non-Composited Animations in Chrome DevTools
The animations track of a performance trace can now tell you why an animation was not composited.
CSS Wrapped 2024
Chrome and CSS in 2024 journeyed through the forest, over the mountains, and across the seas…