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
- Select the element you want to spin (for example, circle)
- 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
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
