You can now use `attr()` with any CSS property — not just content – and it can parse values into data types other than <string>.
CSS attr() gets an upgrade
CSS
Move elements around the DOM while preserving their state with moveBefore
Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
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.