infinite Infinite rotation with specific start- and endpoint

[paulorero 3 Likes (Newbie)]

Hi there,

 

I want to create an animated wheel which starts at a specific degree and ends at a specific degree. Until it's requested to stop/pause it needs to spin infinite.

 

So basically there are three stages "starting", "spinning", "stopping". The difficult task is to start and stop spinning with some momentum to feel natural.

 

I have found multiple very helpful forum posts about that topic. They all stop at a random degree.

 

Especially this seams to be a very similar problem but the solution is missing the momentum at start and stop position. 

 

Thanks in advance

 

See the Pen abzwvGm by mikeK (@mikeK) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey paulorero and welcome to the GreenSock forums!

 

5 hours ago, paulorero said:

basically there are three stages "starting", "spinning", "stopping". The difficult task is to start and stop spinning with some momentum to feel natural.

According to the logic that you listed right there I'd set it up using some repeating tweens/timelines and using a callback to sequence the next one. Here's a quick and dirty version:

See the Pen mdeQmaG?editors=0010 by GreenSock (@GreenSock) on CodePen

[paulorero 3 Likes (Newbie)]

Hi ZachSaucier, thank you for your answer

 

Something like that also was my first try. I like your solution because the start and loop phase blend nicely.

The end phase how ever is not as smooth because the tween needs to travel more distance in a fixed duration...

 

Is there a way to combine these two approaches (using timeScale, using multiple tweens in timeline)?

My goal would be an dynamic animation like the example using `timeScale`. But I have no idea how to achieve something like this.

 

It would be cool if we could just append the final rotation onto the tween in the "pause" event handler.

var rotateCD,
    pauseTween,
    playBtn  = document.getElementById("play"),
    pauseBtn = document.getElementById("pause"),
    audio    = document.createElement("audio");

rotateCD = gsap
.to("#creature", {
  rotation: 360, 
  duration:0.3,
  ease: 'none',
  repeat: -1,
  paused: true
})
.timeScale(0);

play.onclick = function() {
  rotateCD.play();
  gsap.to(rotateCD, {timeScale: 1, duration:3});
};

pause.onclick = function() {
  // Adding the final rotation here would be ideal
  gsap.to(rotateCD, { rotation: 36, timeScale: 0, duration:3, onComplete: function() { this.pause(); }});
};

 

[ZachSaucier 7,152 Likes (Superhero)]

5 minutes ago, paulorero said:

The end phase how ever is not as smooth because the tween needs to travel more distance in a fixed duration...

Just play with the ease and rotation values until it's more smooth  I guarantee this is the easiest approach to get the sort of results that you're looking to get.

 

6 minutes ago, paulorero said:

It would be cool if we could just append the final rotation onto the tween in the "pause" event handler.

That's theoretically possible, but you'd have to detect the velocity of the rotation at the start and then tween the (negative) acceleration to be sure that it ends up where you want it to. It's the sort of thing that Draggable does under the hood if you have it snap its end values.

[paulorero 3 Likes (Newbie)]

Calculating the duration based on the stop position seems to work okay for now.

 

See the Pen XWmygvB by paulborm (@paulborm) on CodePen

 

Thank you very much!

[GreenSock 18,586 Likes (Superhero)]

This is exactly what InertiaPlugin is for, but you've got a tricky scenario because you're actually looping and the value goes from 360 back to 0. It's not too hard to work around, though - here's my suggested approach that should work smoothly no matter when you click: 

 

See the Pen eYpQGyp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?