Alternate Column Scroll Animation

A grid layout with columns that scroll in opposite directions and a content preview animation.

The post Alternate Column Scroll Animation appeared first on Codrops.

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!

The post Alternate Column Scroll Animation appeared first on Codrops.


Print Share Comment Cite Upload Translate
APA
Mary Lou | Sciencx (2024-03-28T17:57:31+00:00) » Alternate Column Scroll Animation. Retrieved from https://www.scien.cx/2021/12/21/alternate-column-scroll-animation/.
MLA
" » Alternate Column Scroll Animation." Mary Lou | Sciencx - Tuesday December 21, 2021, https://www.scien.cx/2021/12/21/alternate-column-scroll-animation/
HARVARD
Mary Lou | Sciencx Tuesday December 21, 2021 » Alternate Column Scroll Animation., viewed 2024-03-28T17:57:31+00:00,<https://www.scien.cx/2021/12/21/alternate-column-scroll-animation/>
VANCOUVER
Mary Lou | Sciencx - » Alternate Column Scroll Animation. [Internet]. [Accessed 2024-03-28T17:57:31+00:00]. Available from: https://www.scien.cx/2021/12/21/alternate-column-scroll-animation/
CHICAGO
" » Alternate Column Scroll Animation." Mary Lou | Sciencx - Accessed 2024-03-28T17:57:31+00:00. https://www.scien.cx/2021/12/21/alternate-column-scroll-animation/
IEEE
" » Alternate Column Scroll Animation." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2021/12/21/alternate-column-scroll-animation/. [Accessed: 2024-03-28T17:57:31+00:00]
rf:citation
» Alternate Column Scroll Animation | Mary Lou | Sciencx | https://www.scien.cx/2021/12/21/alternate-column-scroll-animation/ | 2024-03-28T17:57:31+00:00
https://github.com/addpipe/simple-recorderjs-demo