How can I create a rotating animation in Webflow that continuously loops?

To create a continuously looping rotating animation in Webflow, you’ll need to use Webflow Interactions with a looped animation on an element. Here's how to do it:

​

1. Prepare the Element to Rotate

​

• Select or add the element you want to rotate (e.g., a div, image, or icon).
• Give it a class name for targeting in the interaction panel.

​

2. Create a New Page or Element Trigger (Optional)

​

• If you want the animation to start automatically, choose Page Load or While Page is Scrolling as a trigger.
• If you want it to loop continuously regardless of scroll or click, use a "Timed Animation" tied to the page load or the element directly.

​

3. Create a New Timed Animation

​

• Go to the Interactions panel (lightning bolt icon).
• Click + next to Page Trigger or Element Trigger, and select Page Load → When Page Starts Loading.
• Click + under the animation action and choose Start an Animation.
• Click + Create New Timed Animation and give it a name like “Rotate Loop”.

​

4. Add the Rotation Keyframes

​

• Click + and choose Transform > Rotate on your target element.
• Set Rotate Z to 0° with a duration of 0s at the beginning of the timeline.
• Move the playhead to, for example, 3s, then add another Rotate Z action with the value set to 360°.
• Set the easing to Linear (none) to avoid slowing down the animation at start/end.
• Set the duration for this rotation (e.g., 3s).

​

5. Enable Looping

​

• In the animation settings, check the box “Loop” to make the animation repeat continuously.
• You can also enable “Keep running as previewed” if needed.

​

6. Publish and Test

​

• Publish your site to see the rotation in action.
• Confirm that the element is smoothly rotating as expected.

​

Summary

​

To make a rotating animation loop in Webflow, use a Timed Animation triggered on page load, animate the Rotate Z property from 0° to 360° over a set duration, use Linear easing, and enable the Loop option.