Scroll Animations for Image Grids

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

By 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

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Ideas for CSS Button Hover Animations

Preview to Full Content Page Transition

Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!