Post

Really curious about how this works!

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.

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?

"Regrettable View Transitions", aka when you regret starting it and want to do something else

Unfortunate for that second a that makes it not an anagram

My code also works with multiple elements that are being animated as part of a single View Transition. (The recording of this demo here was deliberately done in Firefox as both Chrome and Safari show some visual glitches when the new VT is about to start 😢)

Around the same time last year I hacked something together that generated a custom SVG path to animate the items along it. It took a lot of late evenings to get it somewhat right, but I never really nailed it. The current approach is much simpler, as I whipped this one up in just two evenings :)

Nothing public to play with yet. I need to clean some of the stuff up first :)