Website
Circular Animated Hero Section in Framer
This is an animated hero section in Framer, inspired by the original concept by Preston. Feel free to remix the project and see how it’s built, all without any code.
About the resource
To add this rotating images effect to the hero section, I first had to come up with a structure that let me position the images in a circle. For that, I created multiple "Arms," which are basically frames with 2 images inside—one on top and one on the bottom. Then, I could duplicate these arms and rotate each one by 15 degrees to get a full circle. If you need more help with this setup, watch my tutorial on the 3D circular animation where I used a similar technique.
About the resource
To add this rotating images effect to the hero section, I first had to come up with a structure that let me position the images in a circle. For that, I created multiple "Arms," which are basically frames with 2 images inside—one on top and one on the bottom. Then, I could duplicate these arms and rotate each one by 15 degrees to get a full circle. If you need more help with this setup, watch my tutorial on the 3D circular animation where I used a similar technique.
About the resource
To add this rotating images effect to the hero section, I first had to come up with a structure that let me position the images in a circle. For that, I created multiple "Arms," which are basically frames with 2 images inside—one on top and one on the bottom. Then, I could duplicate these arms and rotate each one by 15 degrees to get a full circle. If you need more help with this setup, watch my tutorial on the 3D circular animation where I used a similar technique.
The structure of the circularly positioned images.
The structure of the circularly positioned images.
The structure of the circularly positioned images.
Once we have the images in a nice circle, we can position them within the background of our hero section.
The last thing I did was add a loop effect to the circle of images so they rotate around nice and slowly. These kinds of effects can be added to any layer from the right panel.
Once we have the images in a nice circle, we can position them within the background of our hero section.
The last thing I did was add a loop effect to the circle of images so they rotate around nice and slowly. These kinds of effects can be added to any layer from the right panel.
Once we have the images in a nice circle, we can position them within the background of our hero section.
The last thing I did was add a loop effect to the circle of images so they rotate around nice and slowly. These kinds of effects can be added to any layer from the right panel.
The loop effect settings.
The loop effect settings.
The loop effect settings.
