Really Slow Ease Out

[Heather]

Hi,

 

I am trying to make an animation where a wheel eases in to rotate quickly then stops really slowly for 10 seconds. So I would like it to run slowly for about the last 3 seconds.

 

I am struggling to get this really slow ease out and was hoping someone would have some advice? I have looked at every ease class available, I have tried making my own custom ease, but it seems I just cannot physically achieve the ease out I want. I have also tried using the ThrowProps plugin but again the easing was not good enough.

 

All I want is an ease out that causes the rotation to move really slowly for the last third of my animation.

 

I generally use the TweenLite.to() method to start my animation.

 

Thanks!

[Carl]

Hi and welcome to the GreenSock forums,

 

Your best bet may be to create a rotation tween and then after its been playing for a little bit create another tween that tweens the progress of that tween over a long amount of time.

 

Something like this:

 

 

import com.greensock.*;
import com.greensock.easing.*;

var rotationTween = TweenMax.to(circle, 4, {rotation:720, ease:Power1.easeInOut});

TweenLite.delayedCall(2.5, slowDown);

function slowDown() {
TweenLite.to(rotationTween, 10, {progress:1, ease:Power1.easeOut}); 
}

 

 

you may have to play with the numbers and eases to get the right effect / smoothness

[Heather]

Thanks! Using that approach I managed to get an ease out that I'm happy with.

 

In case anyone is interested my exact code was:

var rotationTween:TweenMax = TweenMax.to(_mainWheel, 5, {rotation: -degrees, ease: Quad.easeIn});
			
TweenLite.delayedCall(3.5, slowDown1);
TweenLite.delayedCall(5, slowDown2);
			
function slowDown1():void {
	TweenLite.to(rotationTween, 4, {currentProgress: 1});
}
			
function slowDown2():void {
	TweenLite.to(rotationTween, 5, {currentProgress: 1, ease: Quart.easeOut, onComplete: onWheelSpinComplete});
}