Post

> They dont perfectly match Hi @nerdy.dev, I reckon delaying the start of the green ball in codepen.io/argyleink/pe... would sync them? (requestAnimationFrame(()=>requestAnimationFrame(()=>ball2.classList.add(state)));

Put some scale in the swoop, I observed more than just timing differences

Martin Trapp

@martr.app

9 Mar

Yikes, that’s surprising! Now you’ve got me curious. I’ll check it out later.

Bag of Tricks for View Transitions

14 Mar

Speed diff sounds like it’s CPU vs GPU But the scale being off feels more like perspective?

@vtbag.dev

Bag of Tricks for View Transitions

So cool to see such a detailed behind-the-scenes look from someone whose work I really admire! Here are two more demos with swooping transitions that use the image-pair pseudo for the composition instead of the approach described in the article above.

@vtbag.dev

vtbag.devThe Vector DemoA view transition tech demo were the old and new positions of morphing images control the trajectories.

vtbag.dev/vector-demo/

Bag of Tricks for View Transitions

@vtbag.dev

fun-with-view-transitions.pages.devTower of HanoiA gloriously playful episode of Fun With View Transitions that pokes, prods, and plays with a demo stuffed with tips and tricks!

fun-with-view-transitions.pages.dev/episode/7/page (set view transition type to "...with vectors")

Andreas Møller

@andreasmoller.dk

I think your discovery was caught on video

from this, always straight lines codepen.io/argyleink/pe...

to this, curved and motion blurred codepen.io/argyleink/pe...

Paul Melero

@paulmelero.com

Does it work in other browsers too?

Bramus

@bram.us

bram.usView Transitions Applied: More performant ::view-transition-group(*) animationsIf the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot you can optimize its keyframes so that it animates on the compositor.

Yep, `translate` is the one to manipulate. It’s the same approach I use in www.bram.us/2025/02/07/v... to make the keyframes more performant, allowing the animations to run on the compositor.

Bramus

@bram.us

bram.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...

My approach there only works with elements that don’t change size between the old and new state though. To deal with that, throw more code at it and extract the needed info from the generated keyframes. Then adjust the `transform` with that info. See www.bram.us/2025/03/04/v... for details.

Bramus

@bram.us

Also, I’m working on something to automate this all for you … bsky.app/profile/bram... 😉

Bramus@bram.us

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 …