Jump to content
Search Community

Gradual stopping of repeating animation

DivisionBoy test
Moderator Tag

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 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)
car.jpg?dl=0
 
 

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

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()]

  • Like 4
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.
×
×
  • Create New...