Some days in the past I stumbled upon this lovely animation by Jason Sales space.
I actually preferred how the pictures rotate as they transfer via the viewport, and it acquired me fascinated about what number of totally different variations might be constructed from the identical core concept. These demos are the results of that exploration.
The Idea
The principle concept behind these results is to rearrange the pictures alongside a wave-like path and animate their transforms primarily based on scroll progress. As every picture enters and leaves the viewport, it rotates via 3D house whereas additionally shifting alongside the z-axis, creating totally different depth and orientation modifications all through the interplay.
The animations are pushed by GSAP’s ScrollTrigger, with Lenis offering easy scrolling. From there, the whole lot comes all the way down to how the transforms are calculated and mapped to the scroll progress.
Variations
As soon as the fundamental setup is in place, there are many instructions you may take it. Totally different easing curves, interpolation features, rotation ranges, depth mapping, scaling, and CSS filters all produce very totally different outcomes whereas counting on the identical underlying construction. Some demos exaggerate the 3D movement, others emphasize depth or use blur and brightness to strengthen the phantasm of motion.
These examples are meant as a place to begin, so be happy to tweak the maths, mix concepts from totally different demos, and see what sorts of interactions you may give you.
