Need help with this simple animation

Design help Animations & Interactions
1

Hi,

I created this website https://preview.webflow.com/preview/pl-genesis-modular-world-s-hackathon-mi?utm_medium=preview_link&utm_source=designer&utm_content=pl-genesis-modular-world-s-hackathon-mi&preview=9f8500048efc4348306611db334bfd31&pageId=690ff6779323d93e5711a067&locale=en&workflow=preview and i need to animate the glowing circle into a glowing circle and slowly rotate. i tried looking for tutorial for the whole day but couldn’t find any. this is something simple and doable with framer.

Can you please help me on this matter. thanks

1 Like
2

Hi there,

Here’s how to create a circular shape with a rotating glow effect in Webflow:

To create the circle:

  1. Add a Div block to your page
  2. Set equal width and height (e.g., 200px x 200px)
  3. Set border-radius to 50%
  4. Add your desired background color

For the rotating glow animation:

  1. In the Styles panel, add a box-shadow with your preferred color
  2. Add a filter effect and set blur to create the glow
  3. In the Interactions panel, create a new animation
  4. Choose “While in view” as the trigger
  5. Add a transform effect and set it to rotate 360 degrees
  6. Set the animation to “Linear” and “Loop”
  7. Adjust the duration to control the rotation speed

You can enhance the glow effect by adding multiple box-shadows or adjusting the opacity and blur intensity.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

i can’t find while in view as a trigger and rotate 360 degrees

1 Like