Jump to content

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

Can you Tween the start and stop of a TimelineMax?

Go to solution Solved by Carl,

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

I have a timelineMax that calls a pause function on another timeline. Right now the function is called and the timeline (a looping sprite sheet) stops immediately. Because this second timeline is a looping sprite animation, I'd like to have it ease to a stop instead of just stopping. Is this possible?


Here's some sample code:



var TL = new TimelineMax({repeat: -1, repeatDelay:-1});
TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)});
TL.set("#car", {backgroundPosition:"0 0"});
TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)});


tl2 .to("#car", 2, { scale:.5, x:"115", y:"-10", ease:Power3.easeOut},"-=.75")
       .addCallback(stopWheels, 10, {ease:Power3.easeOut})
function stopWheels() {
             TL.pause(); // ** WOULD LIKE THIS TO EASE OUT TO A STOP
Link to comment
Share on other sites

Hi kleeman :)


If you'd like to smoothly accelerate or decelerate a timeline you can do that with timeScale()


Something like this:


Here's a nice GreenSock pen that shows it in action:

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


Hopefully that helps a bit. Happy tweening.


  • Like 1
Link to comment
Share on other sites

Hi kleeman,


As far as I can tell this is a pretty simple issue so I can give you an answer right away, but in the future try to provide a link to a demo on codepen to make it easier to see what you're having trouble with :)


Now, regarding your problem, there are probably many ways to do it but what I would suggest trying is this:

function stopWheels() {
  TweenMax.to(tl, 2, {timeScale:0, ease:Power1.easeOut});

What that does is tween the timeScale property of your timeline tl, so that it reaches 0 after 2 seconds. You can change that duration as well as the easing as you would for any other tween. :)


edit: oh, PointC beat me to it :P I tried using the forum's "I'll answer this" feature but it didn't work.

  • Like 3
Link to comment
Share on other sites

perfect! Thank you both! exactly what I needed.

  • Like 1
Link to comment
Share on other sites

  • Solution

Great work guys. Love seeing people share the power of tweening timeScale()


Just want to point out that this makes the callback unnecessary as that tween can go in your timeline like

tl2 .to("#car", 2, { scale:.5, x:"115", y:"-10", ease:Power3.easeOut},"-=.75")
  .to(TL, 2, {timeScale:0, ease:Power1.easeOut}, "-=2");
  • Like 2
Link to comment
Share on other sites

Love seeing people share the power of tweening timeScale()

Yep - that is definitely one of my favorite GreenSock features. It's one of those things that might take a new user a bit to discover, but once you find it, you'll wonder how you went without it.


Easing an individual tween is certainly nice, but animating an entire timeline from/to a buttery smooth* start or finish with one line of code - now that's powerful and so cool.  8-)


*Disclosure: 'buttery smooth' phrase is completely stolen from Jonathan:-P 

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