Jump to content
GreenSock

gareth

speed of looping animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I have a looping animation I am happy with:

TweenMax.to(windControl, controlSpeed, {rotation:180, repeat:-1,ease:Linear.easeNone});

I like the speed my div rotates, but I want to run at the set speed (controlSpeed) for say 5 seconds - what is the best way of doing this. 

 

thanks,

Gareth

Link to comment
Share on other sites

not sure if this is the best way, but this works for me

var windTween
windTween = TweenMax.to(windControl, controlSpeed,{rotation:180,repeat:-1,ease:Linear.easeNone});
TweenMax.to(canvas,5, {onComplete:windEnd});

function windEnd () {
windTween.kill()
}

Just wondering if you have to assign a object to a tween - i.e can you use a tween just as a timer function?

Link to comment
Share on other sites

Hi Gareth,

 

You're pretty close. One solution could be create a dummy tween (very similar to your own reply):

TweenMax.to({}, 5, {onComplete:windEnd});

function windEnd()
{
    windTween.kill();
}

With this you're tweening an empty object so there's no need to use a DOM object to do it, not that there's something wrong with that, just to keep the code cleaner.

 

Another solution is use delayedCall, which works as a timer for callbacks:

TweenMax.delayedCall(5, windEnd);

function windEnd()
{
    windTween.kill();
}

As you can see the delayedCall method is quite cool, kind of a GSAP's setTimeout but with the advantage of the usual construction which makes it easier to read and write than setTimeout, specially if you have to pass params to the callback and the fact that you'll be using the engine's timing mechanism.

 

Best,

Rodrigo.

Link to comment
Share on other sites

Sorry, just wondering how to gradually slow down my tween rather than kill it right away?

 

I would normally use easing, but I am rotating a circle. Is it possible to gradually decrease the time param?

Link to comment
Share on other sites

Hi,

 

Very simple just tween the timeScale property of the tween. Carl posted this reply a while ago and also created a great codepen illustrating how it works:

 

http://forums.greensock.com/topic/8260-stop-animation-of-an-object-on-a-bezier-line-with-easing/

 

See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

TweenMax.delayedCall(5, windEnd);

function windEnd()
{
    TweenMax.to(windTween, time, {timeScale:0});
}

Also you can add easing functions to the tween which makes it look even better.

 

Best,

Rodrigo.

  • 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.
×