Make an element spin forever

Video

In this episode, Sacha, cofounder of Gemeos Webflow agency, shows you how to make an element spin forever in Webflow.

‍

1. Select the element that will trigger the animation

1. Select the element you want to spin (for example, circle)
2. Click the Interactions panel and choose the “Scroll into view” trigger

‍

2. Create the animation

1. Select the “Rotate” animation

‍

2. Set a default position for the element: 0 DEG and 0s Duration

‍

3. Add a transition to change the element’s position and set the animation duration: 360 DEG in 15 sec (for example)

‍

4. Add a transition so the element returns to its default position once the rotation is complete: 0 DEG and 0s Duration

‍

3. Apply the Loop setting to the animation

Check “Loop” in the trigger settings so the animation repeats continuously

‍