New
New
New
Animation
Animated 3D Wheel Website Hero in Framer
This is an animated 3D wheel website hero recreated in Framer, from Joost’s original work. Remix the project to see how this 3D animation is built entirely in Framer, no coding required.
Created by
About the resource
To recreate this animation, I started by setting up a 3D space in Framer, which acts as the main container for everything inside. Within that space, I built the 3D wheel using the arms technique, basically placing images along the edges of invisible arms and rotating each arm by -90 degrees to form a perfect circular layout.
Once the wheel was ready, I added an appear effect on the 3D space layer to make the wheel scale up smoothly as it enters the screen. To bring it to life, I added a 3D rotation so it slightly tilts as it appears, giving it depth. Finally, I added a looping effect with continuous rotation on the Y-axis at -360 degrees, so the wheel keeps spinning seamlessly without stopping.
About the resource
To recreate this animation, I started by setting up a 3D space in Framer, which acts as the main container for everything inside. Within that space, I built the 3D wheel using the arms technique, basically placing images along the edges of invisible arms and rotating each arm by -90 degrees to form a perfect circular layout.
Once the wheel was ready, I added an appear effect on the 3D space layer to make the wheel scale up smoothly as it enters the screen. To bring it to life, I added a 3D rotation so it slightly tilts as it appears, giving it depth. Finally, I added a looping effect with continuous rotation on the Y-axis at -360 degrees, so the wheel keeps spinning seamlessly without stopping.
About the resource
To recreate this animation, I started by setting up a 3D space in Framer, which acts as the main container for everything inside. Within that space, I built the 3D wheel using the arms technique, basically placing images along the edges of invisible arms and rotating each arm by -90 degrees to form a perfect circular layout.
Once the wheel was ready, I added an appear effect on the 3D space layer to make the wheel scale up smoothly as it enters the screen. To bring it to life, I added a 3D rotation so it slightly tilts as it appears, giving it depth. Finally, I added a looping effect with continuous rotation on the Y-axis at -360 degrees, so the wheel keeps spinning seamlessly without stopping.
The appear effect on the 3D wheel in Framer.
The appear effect on the 3D wheel in Framer.
The appear effect on the 3D wheel in Framer.
