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

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.

grid locomotive-scroll scroll

On-Scroll Sliced Text Animation

How to Create a WebGL Rotating Image Gallery using OGL and GLSL Shaders

Inspiration for Text Block Transitions

The Collective

🎨✨💻 Stay informed and inspired with our daily selection of the most relevant and engaging frontend and design news.

Pure inspiration and practical insights to keep you ahead of the game.

Check out the latest news