Comments on: Animating CSS Grid (How To + Examples) https://css-tricks.com/animating-css-grid-how-to-examples/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 07 Feb 2023 19:20:28 +0000 hourly 1 https://wordpress.org/?v=6.2.2 By: Daniel Schwarz https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802869 Tue, 07 Feb 2023 19:20:28 +0000 https://css-tricks.com/?p=376528#comment-1802869 In reply to Veronika.

No issues so far. If I had to guess, it would be the most performant way of going about the concept/effect.

]]> By: Piotr https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802861 Tue, 07 Feb 2023 11:27:45 +0000 https://css-tricks.com/?p=376528#comment-1802861 Firefox 109, works.

]]> By: Veronika https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802840 Mon, 06 Feb 2023 08:49:18 +0000 https://css-tricks.com/?p=376528#comment-1802840 Great article! I’m looking forward to trying this out. Just wondering how performant it is to animate grid properties? Thinking about the recomendations to not animate properties that trigger layout or paint.

]]> By: Chris https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802796 Mon, 30 Jan 2023 23:02:29 +0000 https://css-tricks.com/?p=376528#comment-1802796 In reply to That guy.

I’m using the latest Firefox Developer Edition and it works

]]> By: Joshua Rodenburg https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802795 Mon, 30 Jan 2023 22:54:59 +0000 https://css-tricks.com/?p=376528#comment-1802795 Right now I am only using a drag and drop website Strikingly. It works for me, but I know this is what all the bigger more powerful websites are doing. CSS coding with unlimited color graphics and templates. I hope to be able to correspond with you all on this, but for now I stand impressed for sure.

]]> By: Mitch https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802794 Mon, 30 Jan 2023 14:20:39 +0000 https://css-tricks.com/?p=376528#comment-1802794 In reply to That guy.

I think that’s because most of the examples make use of the :has() selector, which is not yet supported in Firefox.

]]> By: Gerrit for Bazeja https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802786 Sun, 29 Jan 2023 16:44:18 +0000 https://css-tricks.com/?p=376528#comment-1802786 Now this is really very nice and a welcome to Grid.
Thank you so much for sharing

]]> By: John https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802785 Sun, 29 Jan 2023 08:12:45 +0000 https://css-tricks.com/?p=376528#comment-1802785 In reply to That guy.

It does, except the examples using :has() which firefox do not support yet.

]]> By: Aldyndo https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802782 Sat, 28 Jan 2023 20:33:25 +0000 https://css-tricks.com/?p=376528#comment-1802782 In reply to That guy.

awesome gird animated, really the interested article. in the future it must needed, thank you.

]]> By: Peter https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802781 Sat, 28 Jan 2023 19:56:30 +0000 https://css-tricks.com/?p=376528#comment-1802781 Michelle Barker’s design doesn’t work for me (latest FF on Win11 for Workstations). The lower row is OK, on the upper row the texts are just shaking, I don’t get a photos.

]]> By: Niresh Shrestha https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802772 Sat, 28 Jan 2023 07:18:10 +0000 https://css-tricks.com/?p=376528#comment-1802772 Wow this is amazing. The menu animation and the muffins cookies animation was best among these. The best part is the codepen.

]]> By: That guy https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802767 Fri, 27 Jan 2023 20:43:15 +0000 https://css-tricks.com/?p=376528#comment-1802767 It does not seem to work in Firefox

]]> By: Ben https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802759 Fri, 27 Jan 2023 10:05:33 +0000 https://css-tricks.com/?p=376528#comment-1802759 This is great! Thanks for sharing

]]> By: Mary https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802754 Thu, 26 Jan 2023 14:22:30 +0000 https://css-tricks.com/?p=376528#comment-1802754 ❤❤❤
Great article and love the idea for using grid animations for navigation.

]]> By: Jez https://css-tricks.com/animating-css-grid-how-to-examples/#comment-1802753 Thu, 26 Jan 2023 14:01:47 +0000 https://css-tricks.com/?p=376528#comment-1802753 Browsers still don’t support animating grid-template-rows in a way that will actually change the size of the grid itself, sadly. Within the grid stuff will get animated but if you have a grid, and content below it, then animate its grid-template-rows to be, say, smaller, the content below will not smoothly animate to change its position based on the new grid height.

]]>