Push Animation on Grid Objects

I used to be notably within the grid half the place the smaller objects fly away whereas the clicked one animates to fullscreen. So I used to be questioning if this could possibly be one thing I may simply do with the assistance of CSS Grid and GSAP Flip. So I requested Rémi if I may use his idea and began experimenting.

Whenever you use the CSS Grid format you may outline every grid merchandise place precisely, for instance .pos-9 { grid-area: 3 / 5 / 4 / 6; }. My concept was to try to use the Flip plugin to use a category that can solely contact the row or column, relying on the place I need the objects to go. So, once you animate the objects to both north, south, west or east, you may have courses like this:

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

For instance, the merchandise in row 5 that flies north, will keep in its respective column. Now we simply must outline the place we wish which merchandise to maneuver and apply the respective class.

The clicked merchandise will probably be flipped into one other aspect that turns into fullscreen.

That is the end result:

And here’s a variation the place we simply transfer north and south relying on the clicked merchandise’s place. We additionally add a slight rotation:

And on this variation we transfer the entire objects into one particular path that we get from a data-attribute on each clicked merchandise:

Hope you get pleasure from this little experiment and lots of due to Rémi who allowed me to make use of his idea right here!

Thanks for checking by 🙂