Comments on: CSS Fan Out with Grid and @property https://frontendmasters.com/blog/css-fan-out-with-grid-and-property/ Helping Your Journey to Senior Developer Fri, 11 Oct 2024 14:51:23 +0000 hourly 1 https://wordpress.org/?v=6.8.3 By: Chris Coyier https://frontendmasters.com/blog/css-fan-out-with-grid-and-property/#comment-13097 Wed, 09 Oct 2024 22:34:52 +0000 https://frontendmasters.com/blog/?p=4128#comment-13097 In reply to Temani Afif.

Nice.

]]> By: Temani Afif https://frontendmasters.com/blog/css-fan-out-with-grid-and-property/#comment-13095 Wed, 09 Oct 2024 21:10:31 +0000 https://frontendmasters.com/blog/?p=4128#comment-13095 In reply to Chris Coyier.

What about a stepped animation where we animate the grid-template-rows? Not the same vibe but can be good as well.

Example: https://codepen.io/t_afif/pen/BaXQpxL?editors=1100

]]> By: Chris Coyier https://frontendmasters.com/blog/css-fan-out-with-grid-and-property/#comment-13082 Wed, 09 Oct 2024 18:08:19 +0000 https://frontendmasters.com/blog/?p=4128#comment-13082 I think this is clever stuff. “Fanning out” but making CSS grid do all the layout work is probably how I would approach this should I need to build it.

One thing I noticed, and I mentioned it to Preethi too, is that the animation isn’t quite that buttery smooth feel that is ideal for any kind of screen movement. And I think it boils down to the fact the the animation, in this particular demo, is essentially animating an integer from 0 to 7, and thus can only really have 7 keyframes. That’s approaching “enough” for animation that is only a fraction of a second anyway, but having an animation that is dependent on the number of items is probably not ideal.

It would be fun homework to approach this another way. My mind went right to using View Transitions to just code the two states, open and closed, and use that to animate between them, which I would think would come out smoother.

]]>