Alternate Column Scroll Animation – Codrops


From our sponsor: Try Mailchimp today.

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. 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!

Source link

About Author


Please enter your comment!
Please enter your name here

Share post:




More like this

How to Create Animated GIFs from GSAP Animations — SitePoint

In this article, I’m going to explain how...

Cold Days, Shining Lights (December 2023 Wallpapers Edition) — Smashing Magazine

Could there be a better way to welcome...

Fixing organizational silos: 7 major challenges of the silo mentality

Turn a fragmented team into a collaborative unit...