Jump to content


Smooth easeOut killAll()

Moderator Tag
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'm looking for a way to smoothly kill all tweens after the standard 15s animations.


For example I have an ad in which I made an horizontal paralax animation of the background in 5 layers.

After 15s I need to stop it but killAll is brutal, is there another way, to ease all tweens down smoothly in 1s for example?

var tweenBg5 = TweenMax.to(bg5,speed*6,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});
var tweenBg4 = TweenMax.to(bg4,speed*6,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});
var tweenBg3 = TweenMax.to(bg3,speed*2,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});
var tweenBg2 = TweenMax.to(bg2,speed,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});
var tweenBg1 = TweenMax.to(bg1,speed/2,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});

TweenMax.delayedCall(15, timelineDone);
function timelineDone(){
    animOver = true;

Here's an example of an ad in which I would like to apply it:


Link to comment
Share on other sites

  • Solution

You can tween the timeScale() of all of them

TweenLite.to([tweenBg5, tweenBg45, tweenBg3], 1, {timeScale:0});

Or since you are loading TweenMax, just use TimelineLite.exportRoot(); which will wrap all your loose tweens in a TimelineLite and then you can tween the timeScale() of that timeline


var tl = TimelineLite.exportRoot();
TweenLite.to(tl, 0.5, {timeScale:0});


  • Like 5
Link to comment
Share on other sites

You just gotta love tweening timeScale() - what a great technique. :)


exportRoot() took me a while to find, but I've used that a few times as well. Great stuff. 

  • Like 2
Link to comment
Share on other sites

in addition to Carl's Great advise ; you need to kill or pause tween/timeline too , after set to timeScale(0) , like this :

TweenLite.to( Tween, 1, { timeScale:0 , onComplete : function(){ Tween.kill() } });

See the Pen oxwxKG by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Great thanks for all your answers, I've still a lot to learn about GSAP, there are so many possibilities!

I didn't know the exportRoot and never tried timeScale :oops: what a productive day

  • Like 1
Link to comment
Share on other sites

If I am already using TimelineMax in my work, does it change anything if I call

TimelineLite.exportRoot(); or is it then better to continue with TimelineMax.exportRoot(); to avoid loading another timeline method?


Also Diaco do I need to kill it if I use the exportRoot method or is it only usefull if I use the first method Carl explained?

Link to comment
Share on other sites

Using TimelineLite.exportRoot() or TimelineMax.exportRoot() will work the exact same way. No impact on performance or load times.


Even using a timeline you should kill the timeScale() tween when done. 

  • Like 2
Link to comment
Share on other sites

Ok so my final version, just to sum up, is to replace this



var tll = TimelineLite.exportRoot();
TweenLite.to(tll, 1, {timeScale:0, onComplete:function(){ tll.kill() }});

works great thanks all

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