"The View Transition API allows us to animate between two states with relative ease. I say relative ease, but view transitions can get quite complicated fast. A view transition can be called in two ways; if you add a tiny bit of CSS, a view transition is initiated on every page change, or you can initiate it manually with JavaScript."
"When a view transition is initiated it creates two snapshots; one of the current state, and one the future state. The view transition then compares the position, sizing and rotation of the two snapshots and, finally creates a keyframe animation. It's pretty much how the FLIP animation technique works, but CSS does all the heavy lifting, even if JavaScript initiates the view transition."
The View Transition API captures two snapshots (current and future) and computes position, size, and rotation differences to generate keyframe animations. The process mirrors the FLIP technique while delegating animation work to CSS, even when JavaScript starts the transition. By default, only the root (HTML) snapshot is created, but additional elements can be included by assigning view-transition-name values. Each named transition produces a group with view-transition-image-pair, view-transition-old, and view-transition-new pseudo elements for mix-blend isolation and custom matrix animations. Snapshots are non-interactive renderings, so runtime style or content changes during the transition are ignored. Chrome DevTools Animations Drawer can debug and slow down transitions.
Read at Piccalilli
Unable to calculate read time
Collection
[
|
...
]