Infinite Loop Animation (Rotation)

Design help Animations & Interactions
1

Hey guys,

I need a little help. Im trying to create an animation that keeps rotating using the loop function.
I got it to rotate 360 degrees, but how do I make it keep looping?

Here is my public share link: https://preview.webflow.com/preview/loop-rotation-animation?utm_medium=preview_link&utm_source=designer&utm_content=loop-rotation-animation&preview=91ab05e55362b2c421b262a248ad5f25&mode=preview

1 Like
2

I found a way to bypass the problem. hope it helps :slight_smile:

https://www.loom.com/share/e3491e9f5b374884b4138e3e81200fd8

3

To create a correct loop you’ll need 3 stages in that rotating transition.

  1. Zero duration and zero DEG
  2. 12 sec duration and -360 DEG
  3. Zeo duration and zero DEG
    With the Loop selected it should work perfect.
15 Likes
4

That’s Work Perfect!

5

Yeah, works perfectly! Thank you :slight_smile:

6

I followed these steps and made it work on one of my websites. I am now trying to make it work in another website but for some reason I just can’t :frowning: this is my read-only link and I am trying to make the button rotate → https://preview.webflow.com/preview/nash-arpetta?utm_medium=preview_link&utm_source=designer&utm_content=nash-arpetta&preview=8d97490f3358dfb4c0463cedd5d0d696&pageId=5f8857d6166f2c230fb32f77&itemId=5f8c701e458086ec692981e0&mode=preview

Could you help me out please? :slight_smile:

7

I solved it!! I applied the rotation to a div containing the button and it started working. For some reason it wasn’t working when it was applied to the button itself :slight_smile:

8

This is really working! Thanks for the simple steps!

9

Is there any chance to make the loop rotation animation start with a 3sec delay, and then go into endless loop? If I add a delay in the first step of the animation, it keeps repeating each loop.