How can I create an infinite loop rotation interaction in Webflow for a spinning gear animation?
TL;DR
- Add your gear image or SVG to the page, assign a class (e.g.,
gear-icon), and center it. - In the Interactions panel, create a Page Load animation that rotates the gear 360° on the Z-axis, set easing to Linear, define duration, and enable Loop for seamless infinite spinning.
To create a seamless infinite loop rotation animation in Webflow (e.g., a spinning gear), use Webflow's Interactions panel to build a looping animation tied to page load.
1. Prepare the Element
- Add your gear graphic as an image or SVG in a Webflow container.
- Assign it a class, such as
gear-icon, to target it in the animation. - Make sure your gear image is centered, ideally with the transform origin set to center (default for most SVGs and images).
2. Create a Page Load Animation
- Go to Page Trigger by clicking the Interactions panel (lightning icon), then choose your page under "Page Trigger".
- Select “Page Load”, then choose “When page starts loading”.
- Click “+ Timed Animation” to create a new animation and name it something like
Rotate Gear.
3. Build the Rotation Animation
- Click “+” and choose Select Element, then find your
gear-iconelement. - Choose “Rotate” from the animation actions.
- Set rotation on the Z-axis to 360 degrees.
- Set the duration (e.g., 4s) and choose Linear easing for smooth continuous motion.
4. Loop the Animation
- Toggle “Loop” on the animation settings.
- Leave the delay at 0 unless you want time between rotations.
5. Optional: Adjust Animation Speed
- Change the Duration to control how fast the gear spins (e.g., shorter = faster).
- Linear easing ensures that motion stays consistent without speeding up or slowing down.
Summary
Create an infinite rotation animation in Webflow by setting a Page Load Interaction targeting your gear element with a 360° rotate action, using Linear easing and enabling Loop. This creates a smooth, seamless spinning effect that's ideal for gears or loading animations.