Smooth easeOut killAll()

[fripi 10 Likes (Newbie)]

Hi,

 

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;
    TweenMax.killAll();
}

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

http://www.sharpness.be/demo/201604_keyplan/20160401_KTB_keyplan_v1_600x500_NL/

[Carl 9,066 Likes (Superhero)]

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});

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/exportRoot/

[PointC 8,599 Likes (Superhero)]

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. 

[Diaco 1,948 Likes (Superhero)]

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

[fripi 10 Likes (Newbie)]

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 what a productive day

[fripi 10 Likes (Newbie)]

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?

[Carl 9,066 Likes (Superhero)]

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. 

[fripi 10 Likes (Newbie)]

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

TweenMax.killAll();

with

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

works great thanks all