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

Show More


Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button