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 🙂

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.

Stay up to date with the latest web design and development news and relevant updates from Codrops.