Post

New demo: Animated CSS Grid Layout. codepen.io/bramus/pen/o... Here’s the thing: No View Transitions. No JS at all. Instead, it uses Anchor Positioning to anchor the cell contents to the cell. Then, CSS transitions are used to animate the contents to their new location as the grid re-layouts.

15/6/26, 8:38 pm22 reposts164 likes

Chris Bolson

@cbolson.bsky.social

15 June

Nice demo! I used a similar trick on my recent football formations demo. The ”players” are anchored to cells which are re-positioned to different grid areas as you change the selected formation. codepen.io/editor/cbols...

codepen.ioFootball formations with radio buttonsThis is the simplified demo version of my Football team selector which can be found here: https://codepen.io/editor/cbolson/pen/019ea198-6dfd-70ff-b4b

Nice demo! 🤩

this is great! never crossed my mind to try this 👏

Sam Rose

@samwho.dev

15 June

Hehe, I did a version of this in my reservoir sampling post. I called the elements in the grid “slots” and FLIPped cards into them. No anchor positioning (still haven’t taken the time to learn it), but yes JS. Awesome that you can do it without JS!

Bag of Tricks for View Transitions

@vtbag.dev

15 June

A notable strength is the ability to recognize that not every problem is a nail and to select the most effective tool accordingly ;-)

Bramus

@bram.us

16 June

What helped here is that you can’t actually do it with Document-Scoped View Transitions because the viewport constantly changes size (which makes the VT skip), so I was forced to look for a different (and better) hammer 😅

Bag of Tricks for View Transitions

@vtbag.dev

16 June

Yes, that is a very compelling argument. The preview below is from an upcoming, completely redesigned version of the Bag's Inspection Chamber, resizing an iframe with a nailed down viewport to prevent the view transitions from being interrupted while the dimension change.

Bramus

@bram.us

16 June

Oooh, nice!