Alternate Column Scroll Animation – Codrops

Related Articles

From our sponsor: B25600467Try Mailchimp today.

Networks are really magical. There are so many different types of things we can do with them; In terms of layout and scrolling. Some time ago I came across Julia Tonon’s amazing site. The unique design is enhanced by the excellent movement of the columns: while scrolling, the middle column scrolls in one direction, while the outer ones scroll in the other direction.

This is something I thought would be interesting to build on Locomotive Scroll And combine it with a small idea of ​​flying mesh items. Once clicked on a network item, it is animated to the center of the screen while magnifying. The other grid items move to their appropriate position in the thumbnail row below the main image. This type of animation draws a lot of inspiration from the work of Aristoid Banoist Who is God Artist in subtle display switching gestures and unique layout animations.

This is the initial view:


When we click on an image, we move it to the center and activate all the other images in the display field to navigate the small thumbnail:


And this is how all the flow of traffic looks like:

Please note that this experiment is mostly a model (there is no “real” navigation in thumbnails for this)!

I really hope you find it inspiring! Thanks for checking out!

8 design tips that will highlight your blog or store



Please enter your comment!
Please enter your name here

Popular Articles