Push Animation on Grid Items

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 🙂