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 🙂

Tagged with:

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.

Building an Interactive Sparkline Graph with D3

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

Model Texture Transition and Procedural Radial Noise using WebGL

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

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!