How can I create a rotating animation in Webflow that continuously loops?
TL;DR
- Select the element to rotate, give it a class, and open the Interactions panel.
- Add a Page Load or Element In View trigger, create a Rotate animation with 360° on Z-axis, set linear easing, enable looping, and preview to adjust timing or direction.
To create a rotating animation that continuously loops in Webflow, you’ll need to use Webflow’s Interactions panel and set up a custom looping animation timeline.
1. Add the Element to Animate
- Select or add the element you want to rotate (e.g., an image, div block, or icon).
- Give it a unique class name so it’s easy to reference in the animation.
2. Open Interactions Panel
- Go to the Interactions panel (lightning icon in the right sidebar).
- Click + next to Page Trigger or Element Trigger, depending on whether you want the animation to trigger on page load or when an element enters the view.
3. Add a “While Page is Loading” or “While Element is in View” Trigger
- Choose Page Trigger → Page Load or Element Trigger → While Scrolling in View, depending on your need.
- Select Start an Animation and click + to create a new animation.
4. Build the Rotation Animation
- In the animation timeline, click + Add Action → Rotate.
- Set the rotation to 360 degrees on the desired axis (usually the Z axis for a flat spin).
- Set a duration (e.g., 2s) and easing to linear for consistent speed.
5. Enable Looping
- At the bottom of the animation panel, check the box for "Loop".
- Leave “Wait for animation to finish before triggering again” unchecked for a continuous loop.
6. Preview and Adjust
- Click Preview to test the animation.
- Adjust the duration or rotation value as needed (e.g., use -360 degrees for counter-clockwise movement).
Summary
To create a continuously looping rotation in Webflow, set up a Rotate animation with 360° rotation, choose linear easing, and enable the Loop option in the Interactions panel. This creates a smooth and infinite spinning effect for your element.