Scroll Animation Ideas for Image Grids

Some ideas for animations on images in a grid when scrolling a page.

Today I’d love to share some experimental scroll animations with you! The idea is simple: when scrolling a grid of images, animate the images that enter or leave the viewport in an interesting and creative way πŸ™‚

For these effects I’m using the super helpful ScrollTrigger plugin of GSAP and the new smooth scroll library Lenis by the amazing folks of Studio Freight.

When scrolling a grid layout, we can move, scale or rotate the images, there’s really endless possibilities! In this demo, we squeeze them:

In the following demo we add a 3D rotation effect, creating the illusion of something like a roll:

I really hope you enjoy this set of experiments and find it useful for your projects!

Thanks for checking by πŸ™‚

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.

Browse amazing websites

πŸ’Žβœ¨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.