Jump to content


Gradual stopping of repeating animation

Recommended Posts


I began to understand a little GSAP.


But i can not understand how can gradually stop repeat animation?


I've seen this



but I need to stop the animation smoothly, as possible?


For example, I need to gradually stop the movement of the car after three seconds.

function stopCar() {
/*some script to stop a car*/
setTimeout(stopCar, 3000)

See the Pen xwKWmE by DivisionBoy (@DivisionBoy) on CodePen



Link to comment
Share on other sites

I am hell bent on not letting Carl beat me to this answer. :D


There are a few ways of going about this. It will depend how you want to go about it.


I forked out your pen, made a few changes to it and made what I *think* is what you're after. Do have a look on the comment I left there for an alternative way of animating. There's nothing wrong with either way, it is just two different approaches.


See the Pen NGKBEE by dipscom (@dipscom) on CodePen


The long and the short of it:

You will kill the tweens you're animating and immediately create new ones to animate the car/background from the position they are currently in at the time you killed the tweens.


Another few pointers: Look at the code carefully, you will see there is no need to nest so many divs and sometimes you don't even need a div. Spotting this sort of thing will become natural the more you do it. There is also no need to have a timeline for each of the things you want to animate. Generally just a TweenMax is enough unless you want things to happen in sequence.


Hope this is what you're after.

  • Like 4
Link to comment
Share on other sites

thanks for the demo, looks great!


You can tween the timeScale() of a timeline 




So just place your animations into one timeline and you should be good to go.




I see you just snaked me. Good job!


Love having folks jump in.





  • Like 5
Link to comment
Share on other sites

Oh, and a little power-tip for you guys.


Since all the timelines were not yet nested into one timeline you can use exportRoot() to place all active animations into a timeline and then control that timeline like this


function stopCar() {
    /*some script to stop a car*/
    var allTimelines = TimelineLite.exportRoot();
    TweenLite.to(allTimelines, 2, {timeScale:0})
  TweenLite.delayedCall(3, stopCar)




its a ridiculously powerful (and handy) feature.


[docs id=js.TimelineLite.exportRoot()" linktext="docs for exportRoot()]

  • Like 4
Link to comment
Share on other sites

Dipscom, thank you very much for the solution of the problem and fix my code, you are very helpful!

Carl, exportRoot great thing, definitely come in handy in the future, thank you!
Link to comment
Share on other sites

  • 1 year later...

I know this is old but thought I'd chime in here with a really simple example of Jack's timescale tween in case anyone happens upon this and wants another little example. Here's a codepen where a ball "spins" using directionalRotation, repeats 15 times and then stops. The timescale is set to either speed up or slow down.

See the Pen dpqyzO?editors=1010 by swampthang (@swampthang) on CodePen

  • Like 1
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.