Jump to content
GreenSock

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

Smooth easeOut killAll()

Recommended Posts

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/

Link to comment
Share on other sites

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/

  • 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

TweenMax.killAll();

with

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