Circular Animated Hero Section in Framer

Circular Animated Hero Section in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik
profile image of Preston

Created by

Circular Animated Hero Section in Framer
Circular Animated Hero Section in Framer
Circular Animated Hero Section in Framer

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 circle structure

The structure of the circularly positioned images.

the circle structure

The structure of the circularly positioned images.

the circle structure

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

The loop effect settings.

the loop effect

The loop effect settings.

the loop effect

The loop effect settings.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

    Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

    Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

  • Overlapping Layout in Framer

    Overlapping Layout in Framer

    Website

    Overlapping Layout in Framer

    Overlapping Layout in Framer

    Website

    Overlapping Layout in Framer

    Overlapping Layout in Framer

    Website