CSS Anchor Positioning lacks native support for animating the `position-area` property, which only supports discrete animation. A workaround technique uses the `@bramus/style-observer` library to detect computed value changes on `position-area` and `position-try`, then triggers a View Transition to animate between the old and new positions. The approach temporarily resets the element to its previous position before starting the transition. Known issues include Firefox incompatibility, a 1-frame glitch in Chrome due to `transitionrun` timing ambiguity, and scroll-related sync issues during View Transitions. The Chrome glitch currently limits practical usability.

4m read timeFrom bram.us
Post cover image
Table of contents
The problemThe techniqueKnown Issues

Sort: