Gradual stopping of repeating animation

[DivisionBoy]

Hi!

I began to understand a little GSAP.

 

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

 

I've seen this

http://greensock.com/forums/topic/12302-stop-looping-banner-after-a-set-amount-of-seconds/

 

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

 

 

[Dipscom]

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

 

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.

[Carl]

thanks for the demo, looks great!

 

You can tween the timeScale() of a timeline 

 

http://codepen.io/GreenSock/pen/LuIJj

 

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

 

Dipscom, 

 

I see you just snaked me. Good job!

 

Love having folks jump in.

 

Awesome.

 

c

[Carl]

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)

 

http://codepen.io/GreenSock/pen/dYbqrg?editors=101

 

its a ridiculously powerful (and handy) feature.

 

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

[DivisionBoy]

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!

[swampthang]

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