Post

how to make #CSS view transitions swoop or have motion blur or how I learned to help view transitions not always go in straight lines ⤷ nerdy.dev/swoop-there-...

nerdy.devView Transitions can swoop‽ · March 7, 2026How to make View Transitions not always a straight line

Bramus

@bram.us

7 Mar

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.

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.

Bramus

@bram.us

7 Mar

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.

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

Bramus

@bram.us

7 Mar

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 …