Post

Did anyone say Retargetable View Transitions (aka Interruptible View Transitions)? I think I’ve got it working (by throwing some extra JavaScript at it) …

Julian Garnier

@julian.gr

22 Jan

Really curious about how this works!

Bramus

@bram.us

I (partially) recreate the VT animations in the real DOM (on hidden elements). Upon interruption of the active View Transition I read the mid-flight values from those copies, which I then use as the starting point for the next VT.

22/1/26, 3:04 pm0 reposts1 like

Julian Garnier

@julian.gr

22 Jan

Oh ok, interesting, how much of the VT animation do you actually have to manually write? Can you read/copy the final computed values of a VT animation and feed that to the DOM animations?

Bramus

@bram.us

22 Jan

You can sniff out the VT animations if you want (see www.bram.us/2025/01/01/v... for details) but I rely on manually getting the position of the animated subjects — hello getBoundingClientRect — before and after the VT.

bram.usView Transitions Snippets: Getting all Animations linked to a View TransitionA few lines of JavaScript to get all animations linked to an active View Transition.

Julian Garnier

@julian.gr

24 Jan

Ok, thanks for the info!

Bramus

@bram.us

24 Jan

Since I have a hunch you want to know the finer details: the reason I get the positions from _real_ elements is because the values in the keyframes (which are used on the pseudos) are in a different coordinate space: the "Snapshot Containing Block". brm.us/snapshot-con... has all info.

brm.usView Transitions Applied: Dealing with the Snapshot Containing BlockBeware when manipulating the coordinates of the View Transition’s ::view-transition-group(*) pseudo. Depending on where you read those coordinates from, you might end up with layout jumps when writing...