Alternate Column Scroll Animation

Grids are truly magical. There’s so many different kind of things we can do with them; layout-wise and scroll-wise. Some time ago, I came across Giulia Tonon’s amazing website. It was made by the amazing duo of ET Studio. The unique design is enhanced by the exquisite motion of the columns: while scrolling, the middle column scrolls one way, while the outer ones scroll the other way.

This is something that I thought would be interesting to build upon using Locomotive Scroll and combine it with a little idea of flying grid items. Once we click on a grid item, it animates to the center of the screen while scaling up. The other grid items move to their respective positions in the row of thumbnails beneath the main image. This kind of animation is highly inspired by the work of Aristide Benoist who is the master of delicate view switching motions and unique layout animations.

This is the initial view:

When clicking on a image, we move it to the center and animate all other images in the viewport to the little thumbnail navigation:

And this is how all the motion flow looks like:

Please be aware that this experiment is mostly a mockup (no “real” thumbnail navigation for this one)!

I really hope you find this inspirational! Thank you for checking by!