Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
paulorero

Infinite rotation with specific start- and endpoint

Recommended Posts

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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(); }});
};

 

Link to post
Share on other sites
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.

Link to post
Share on other sites

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!

Link to post
Share on other sites

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? 

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×