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) …

Bramus

@bram.us

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 😢)

21/1/26, 9:25 pm0 reposts10 likes

rn90210.bsky.social

@rn90210.bsky.social

22 Jan

Looks promising! You might get some nice transitions if you use the mouse position as the target.

Martin Trapp

@martr.app

21 Jan

Hey, this looks amazing! Congrats, you absolutely nailed it!

Bramus

@bram.us

21 Jan

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 :)

Bramus

@bram.us

21 Jan

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

Bramus

@bram.us

27 Jan

Here’s an updated version of that first demo, using a technique @kvndy.bsky.social taught me: relative animations. The path the dot follows is much smoother now as it doesn’t get interrupted at its mid-flight location but, instead, the new animation gets added to the existing ones. However …

Bramus

@bram.us

27 Jan

However … the recording I provided in the prev post is not using View Transitions. It is faked and by duplicating DOM nodes. The recording attached to this post however is the real VT one, and as you can see it is glitchy (in all browsers) – something I still need to dig into. To be continued … 😉