Component
Crazy 3D Scroll Animation in Framer
This is a crazy 3D scroll animation recreated in Framer, from Alex hunting’s website using 3D and scroll transforms. Feel free to remix the project and see how you can achieve something like this in Framer (no coding needed).
About the resource
To create this 3D scroll animation, I used multiple wrapping frames combined with scroll transforms. The frames are wrapped repeatedly to enable smooth transitions and multiple rotations.
The 3D space layer is wrapped within a sticky frame with perspective and preserve 3D properties applied. I placed the image wrapping frames inside this 3D space frame at the top of the site. As you scroll, trigger frames with scroll sections activate the effect, syncing the position, rotation, and scale of each frame in response to the scroll.
About the resource
To create this 3D scroll animation, I used multiple wrapping frames combined with scroll transforms. The frames are wrapped repeatedly to enable smooth transitions and multiple rotations.
The 3D space layer is wrapped within a sticky frame with perspective and preserve 3D properties applied. I placed the image wrapping frames inside this 3D space frame at the top of the site. As you scroll, trigger frames with scroll sections activate the effect, syncing the position, rotation, and scale of each frame in response to the scroll.
About the resource
To create this 3D scroll animation, I used multiple wrapping frames combined with scroll transforms. The frames are wrapped repeatedly to enable smooth transitions and multiple rotations.
The 3D space layer is wrapped within a sticky frame with perspective and preserve 3D properties applied. I placed the image wrapping frames inside this 3D space frame at the top of the site. As you scroll, trigger frames with scroll sections activate the effect, syncing the position, rotation, and scale of each frame in response to the scroll.
The images are wrapped within multiple frames in 3D space frame.
The images are wrapped within multiple frames in 3D space frame.
The images are wrapped within multiple frames in 3D space frame.
Regarding scroll transforms, on the smaller images, I set the "from" offset behind the main image at trigger 1 and the "to" offset at trigger 4, causing the images to shift as you scroll. The main frame scales up at trigger 2 and back down at trigger 3. The content wrap, holding both the main and smaller images, scales to 1.5x and rotates 180° at trigger 1, then completes a full 360° rotation at trigger 2. The second content frame follows a similar rotation but scales down slightly at trigger 4.
If you want to learn more about working with sticky frames and trigger frames in Framer, check out this lesson.
Regarding scroll transforms, on the smaller images, I set the "from" offset behind the main image at trigger 1 and the "to" offset at trigger 4, causing the images to shift as you scroll. The main frame scales up at trigger 2 and back down at trigger 3. The content wrap, holding both the main and smaller images, scales to 1.5x and rotates 180° at trigger 1, then completes a full 360° rotation at trigger 2. The second content frame follows a similar rotation but scales down slightly at trigger 4.
If you want to learn more about working with sticky frames and trigger frames in Framer, check out this lesson.
Regarding scroll transforms, on the smaller images, I set the "from" offset behind the main image at trigger 1 and the "to" offset at trigger 4, causing the images to shift as you scroll. The main frame scales up at trigger 2 and back down at trigger 3. The content wrap, holding both the main and smaller images, scales to 1.5x and rotates 180° at trigger 1, then completes a full 360° rotation at trigger 2. The second content frame follows a similar rotation but scales down slightly at trigger 4.
If you want to learn more about working with sticky frames and trigger frames in Framer, check out this lesson.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
