Ideas for Grid to Slideshow Switch Animations

Some time ago I was browsing some websites that I collected for our website inspiration roundups. There are some timeless gems that have this amazing design that is always something to marvel about. One of those sites is Paul & Henriette which was made by the heavenly duo Aristide Benoist and Ben Mingo.

I’m totally fascinated with grid layouts, and even more so with irregular grids because they allow for unique effects. Inspired by Paul & Henriette’s beautiful design and effects, we’ll today explore some ideas for switching between a grid layout and a full view or slideshow layout.

We got three different switch animations that we power with GSAP’s Flip plugin.

Initial view is an irregular grid layout inspired by Paul & Henriette:

When we click on an image, we animate to a different layout, like for example, a slideshow that runs vertically:

Note that this is a dummy slideshow, no functionality here!

Another type of layout this could animate to is the following:

Showing some little thumbnails as navigation but from the initial grid. You could also imagine something lateral here, the possibilities are really endless.

Next layout idea to animate to is no big change, but simply a “zoomed” version of the initial view:

Using the GSAP flip plugin it’s super easy to animate to another layout. We basically just add a new class that redefines the grid.

Hope this gives you some inspiration for animations in your design!

Images for these demos were generated using Midjourney.

If you like these ideas and want to stay up-to-date, follow us on Twitter or Instagram.