Scroll Animations for Image Grids

Some ideas for scroll animations for image grids powered by Locomotive Scroll.

By Manoela Ilic in Playground on
Demo Code

The other day I looked at the beautiful website of Elias & Valentin and fell in love with that nice tilted image grid that animates on scroll. The look and feel of a grid like that is super fashionable right now so I wanted to explore this and other layout variations I stumbled upon.

For the scroll animations I used Locomotive Scroll which is a really fantastic library when it comes to smooth scrolling and on-scroll animations.

The tilted grid from Elias & Valentin allows for a fun play with the directions of the animation.
Another interesting layout to play with is a 3D grid.
One line “grids” can simply be animated horizontally.

Check out the GitHub repo of Locomotive Scroll to see how simple it is to use the library.

I really hope you find this set interesting and useful 🙂

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

grid locomotive scroll scroll

Interactive 3D Device Showcase with Threepipe

Building an On-Scroll 3D Circle Text Animation with Three.js and Shaders

Push Animation on Grid Items

Browse amazing websites

💎✨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.