Jump to content
GreenSock

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

Really Slow Ease Out

Recommended Posts

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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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});
}
  • Like 2
Link to comment
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.
×