Menu

Post image 1
Post image 2
1 / 2
0

Exploring 3D Image Rotations on Scroll | Codrops

Codrops·Manoela Ilic·3 months ago
#T6O9IfrX
Reading 0:00
15s threshold

Some ideas for animating images in 3D while scrolling. 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.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More