Some days ago I stumbled upon this beautiful animation by Jason Booth.

I really liked how the images rotate as they move through the viewport, and it got me thinking about how many different variations could be built from the same core idea. These demos are the result of that exploration.

The Concept

The main idea behind these effects is to arrange the images along a wave-like path and animate their transforms based on scroll progress. As each image enters and leaves the viewport, it rotates through 3D space while also moving along the z-axis, creating different depth and orientation changes throughout the interaction.

The animations are driven by GSAP’s ScrollTrigger, with Lenis providing smooth scrolling. From there, everything comes down to how the transforms are calculated and mapped to the scroll progress.

Variations

Once the basic setup is in place, there are lots of directions you can take it. Different easing curves, interpolation functions, rotation ranges, depth mapping, scaling, and CSS filters all produce very different results while relying on the same underlying structure. Some demos exaggerate the 3D motion, others emphasize depth or use blur and brightness to reinforce the illusion of movement.

These examples are meant as a starting point, so feel free to tweak the maths, combine ideas from different demos, and see what kinds of interactions you can come up with.