Push Animation on Grid Items

A grid animation based on Rémi Clauss’ concept where grid items move to a specific position relative to their initial one.

Already a while back, I saw this really nice grid animation by Rémi Clauss:

I was particularly interested in the grid part where the smaller items fly away while the clicked one animates to fullscreen. So I was wondering if this could be something I could easily do with the help of CSS Grid and GSAP Flip. So I asked Rémi if I could use his concept and started experimenting.

When you use the CSS Grid layout you can define each grid item position exactly, for example .pos-9 { grid-area: 3 / 5 / 4 / 6; }. My idea was to try and use the Flip plugin to apply a class that will only touch the row or column, depending on where I want the items to go. So, when you animate the items to either north, south, west or east, you can have classes like this:

.pos-north { grid-row: 1; }
.pos-south { grid-row: 7; }
.pos-west { grid-column: 1; }
.pos-east { grid-column: 7; }

For example, the item in row 5 that flies north, will stay in its respective column. Now we just need to define where we want which item to move and apply the respective class.

The clicked item will be flipped into another element that becomes fullscreen.

This is the result:

And here is a variation where we just move north and south depending on the clicked item’s position. We also add a slight rotation:

And in this variation we move all of the items into one specific direction that we get from a data-attribute on every clicked item:

Hope you enjoy this little experiment and many thanks to Rémi who allowed me to use his concept here!

Thanks for checking by 🙂

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!