How can I create an infinite loop rotation interaction in Webflow for a spinning gear animation?
TL;DR
- Add a Page Load animation with a 360º z-axis rotation and linear easing on your gear element.
- Enable the loop option in the animation settings to create a continuous spinning effect.
To create a continuous spinning gear animation in Webflow, you can use a looped interaction with a rotation transform.
1. Prepare Your Gear Element
- Make sure your gear is an SVG or image element placed in your Webflow project.
- Give the gear a unique class name (e.g.,
gear-spin).
2. Set Up a Page Load Animation
- Go to the Interactions panel (click the lightning icon).
- Under Page Trigger, choose Page Load → When Page Finishes Loading.
- Click + Add Action → Start an Animation and create a new Timed Animation (e.g.,
Gear Rotate Loop).
3. Add a Rotation Step
- Click the gear element on the canvas to target it in the animation.
- In the animation timeline, click +, then choose Rotate.
- Set z-axis rotation to
360º(or-360ºfor reverse direction). - Set duration to something smooth like 10s, and choose Linear easing for a constant spin.
4. Enable Infinite Loop
- Check the Loop box next to the animation name in the Page Load trigger panel.
- Make sure the toggle is turned ON to loop the animation infinitely.
5. (Optional) Improve Performance
- In your element settings, ensure “Will-change: transform” is set via custom CSS or Webflow's Style panel (use
transformas the property). - This hints the browser to optimize GPU performance for that element.
Summary
Use a Page Load animation with a rotation transform set to 360º and linear easing, and enable looping to make your gear rotate continuously.