{"id":4184,"date":"2024-10-14T09:26:51","date_gmt":"2024-10-14T14:26:51","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4184"},"modified":"2024-10-14T09:26:52","modified_gmt":"2024-10-14T14:26:52","slug":"fanout-with-grid-and-view-transitions","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/fanout-with-grid-and-view-transitions\/","title":{"rendered":"Fanout with Grid and View Transitions"},"content":{"rendered":"\n

I got a little nerdsniped by Preethi’s post CSS Fan Out with Grid and @property<\/a> the other day. I like the idea of a opening a menu of items where the layout is powered by CSS grid. Then it collapses back into just one cell of the grid. You can even animate the grid columns\/rows themselves to pull this off, as Preethi demonstrated. If you know how many columns\/rows you want, you can animate that number up and down.<\/p>\n\n\n\n

I found the animations just a bit<\/em> less smooth than I’d like to see, generally. The smoothness depends on lots of factors, like how many columns\/rows there are, how long the duration is, and how big those columns\/rows are. But imagine 3 rows collapsing to 1 over a full second. Since what is being animated is an integer.<\/em> The best that can do is have two keyframes (3 to 2, 2 to 1) at 500ms each. It will not feel smooth. Preethi smoothed it over by animating the heights of items too, but the column\/rows changes can’t be smoothed over (there can never be 1.5 rows, for example).<\/p>\n\n\n\n

My mind went right to View Transitions. Particularly the “same page” style of View Transitions you can call with the JavaScript API document.startViewTransition<\/code>. With it, we actually don’t even need CSS transitions\/animations at all.<\/em> Weird right?! We just alter the DOM (by changing a class and letting CSS do it’s thing) inside<\/em> a startViewTransition<\/code> function, and the browser will automatically tween any elements with unique view-transition-name<\/code> values. <\/p>\n\n\n\n

Here’s me re-creating a similar layout to the fan out navigation in Preethi’s article:<\/p>\n\n\n\n