Jump to content
Search Community

Stop looping banner after a set amount of seconds?

Devotee007 test
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

  • Solution

Yes, you can use [docs id=js.TweenLite.delayedCall()" linktext="TweenLite.delayedCall()] to wait any amount of time and then fire a function that stops a timeline like:

 

var tl = new TimelineMax();
var maxAnimationTime = 5;

TweenLite.from(".banner", 0.5, {autoAlpha:0})

tl.staggerFrom(".box", 0.3, {y:-50, opacity:0}, 0.1)
  .from(".gs-logo", 0.5, {opacity:0, scale:0.5}, "rotate")
  .to(".box", 1.6, {rotation:360, ease:Linear.easeNone, repeat:-1}, "rotate")

TweenLite.delayedCall(maxAnimationTime, stopAnimation);

function stopAnimation(){
  tl.pause();
}
  • Like 5
Link to comment
Share on other sites

  • 1 month later...

Hi Guys,

 

I am using a modified version of Diaco's falling leaves (codePen below), and I am looking to stop the animation sequence after a set amount of seconds. The delayedCall is working because I have an opacity tween there that works, but the tlSnow.pause(); doesn't seem to have any effect, so the animation is actually continuously running if we check the console--even though we can't see it because it is transparent... any thoughts as to why or how I can actually stop it ?

 

See the Pen wKrdXY by celli (@celli) on CodePen

Link to comment
Share on other sites

Hello celli,

 

The reason it doesn't stop is because you declared your tlSnow variable inside of a function. So it was only avaiable in the scope of your function. If you want to provide that variable within a global scope you need to define your variable outside the function.

 

I forked your example, you will notice on line 5, I define the variable tlSnow

 

var tlSnow;

 

See the Pen gaGxLa by jonathan (@jonathan) on CodePen

 

Also it is always best practice in JavaScript to define your variables with var. this way you insure your intent and that the different browser JavaScript parsers, parse your JavaScript correctly ;)

Link to comment
Share on other sites

Thanks Jonathan, I will remember that about declaring my variables, if they exist within functions... I tested your fork, but is that working ? If I remove the TweenLite.to(".dot", 2, {opacity:0}); line, it doesn't look like it actually pauses...

Link to comment
Share on other sites

In your case you can just declare var  within your animm function and pass the timeline instance tlSnow and your .dot  as the variable elm to delayedCall() which also accepts parameters to pass as arguments to your stopAnimation() function:

 

i updated my codepen from above:

 

See the Pen gaGxLa?editors=001 by jonathan (@jonathan) on CodePen

 

using delayedCall() to pass parameters

function animm(elm) {

  var tlSnow = new TimelineMax({
    repeat: -1
  });

  tlSnow.to(elm, R(6, 15), {
      y: h + 100,
      opacity: R(.2, .9),
      scale: R(2, .25),
      ease: Linear.easeNone
    })
    .to(elm, R(4, 8), {
      x: '+=100',
      rotation: R(360, -360),
      rotationZ: R(0, 180),
      yoyo: true,
      ease: Sine.easeInOut
    }, "-=8")
    .to(elm, R(2, 8), {
      rotationX: R(0, 60),
      rotationY: R(0, 60),
      yoyo: true,
      ease: Sine.easeInOut
    }, "-=5");
};

// passing tlSnow and elm variable to stopAnimation function via delayedCall()
// TweenLite.delayedCall( delay:Number, callback:Function, params:Array, scope:*, useFrames:Boolean )
TweenLite.delayedCall(maxAnimationTime, stopAnimation,[tlSnow,elmArg]);

function stopAnimation(tlSnowArg,elmArg) {
  TweenLite.to(elmArg, 0.2, {
    autoAlpha: 0
  });
  tlSnowArg.pause();
}

delayedCall() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

 

or you could use an onComplete  within your tlSnow timeline and also pass the parameters using onCompleteParams:

function animm(elm) {

  var tlSnow = new TimelineMax({
    repeat: -1,
    onCompleteParams: ["{self}", elm], // passing 2 parameters to stopAnimation()
    onComplete: stopAnimation // calls function on completion of your timeline
  });

  tlSnow.to(elm, R(6, 15), {
      y: h + 100,
      opacity: R(.2, .9),
      scale: R(2, .25),
      ease: Linear.easeNone
    })
    .to(elm, R(4, 8), {
      x: '+=100',
      rotation: R(360, -360),
      rotationZ: R(0, 180),
      yoyo: true,
      ease: Sine.easeInOut
    }, "-=8")
    .to(elm, R(2, 8), {
      rotationX: R(0, 60),
      rotationY: R(0, 60),
      yoyo: true,
      ease: Sine.easeInOut
    }, "-=5");
};

function stopAnimation(tlSnowArg,elmArg) {
  TweenLite.to(elmArg, 0.2, {
    autoAlpha: 0
  });
  tlSnowArg.pause();
}

in the onCompleteParams  "{self}" means that you are passing the timeline instance as a parameter

  • onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example,TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like:onCompleteParams:["{self}", "param2"]

TweenMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

By declaring your variable var for tlSnow inside your function you make sure that tlSnow is only available within the scope of your stopAnimation() function.

 

You can find out more information on Variables and Scope in JavaScript here:

 

JavaScript var: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

JavaScript functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

JavaScript Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

 

:)

  • Like 1
Link to comment
Share on other sites

One more question Jonathan, and I assume this is because my tlSnow() timeline is inside of a function...

I cannot use this to restart my snow falling--but what can I use to "restart" the actual function ?

 

//REPLAY BUTTON
document.getElementById("replay").onclick = function () {
tlSnow.restart();
};
Link to comment
Share on other sites

I would setup a master timeline so you can control your entire animation.

 

The best thing to do is try and setup your timeline like this example:

var masterTL = new TimelineMax({paused:true});

function carMove(){

     var tl = new TimelineMax();

     tl.to("#car", 2, {x:"+=200"})
     /* more tweens go here */

     return tl;
}

function wheelsRotate(){

     var tl = new TimelineMax();

     tl.to("#wheels", 2, {rotation:"+=360"})
     /* more tweens go here */

     return tl;
}

masterTL
.add( carMove())
.add( wheelsRotate() )
.play();

If you want to learn more about Timeline management and the above technique. Please see this awesome codepen example by GreenSock. It is the same animated banner on the GreenSock homepage:

 

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

 

You basically setup a master timeline and then make your various functions return a timeline for the different parts of your animation. Then when you want to pause or restart your timeline you just do that on your master timeline.

 

:)

Link to comment
Share on other sites

  • 2 years later...

@blint welcome to the forums.

 

You can pause all the snow by just using a delayedCall() that then calls TweenMax.pauseAll()

//pause after 5 seconds
TweenLite.delayedCall(5, stopAll)

function stopAll() {
  TweenMax.pauseAll();

}

See the Pen RxVjzN?editors=0011 by GreenSock (@GreenSock) on CodePen

 

I think there is an error in Jonathan's original pen somewhere probably got saved by accident. This thread is about 2 years old.

 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
On 8/26/2015 at 3:38 PM, Carl said:

Yes, you can use [docs id=js.TweenLite.delayedCall()" linktext="TweenLite.delayedCall()] to wait any amount of time and then fire a function that stops a timeline like:

 


var tl = new TimelineMax();
var maxAnimationTime = 5;

TweenLite.from(".banner", 0.5, {autoAlpha:0})

tl.staggerFrom(".box", 0.3, {y:-50, opacity:0}, 0.1)
  .from(".gs-logo", 0.5, {opacity:0, scale:0.5}, "rotate")
  .to(".box", 1.6, {rotation:360, ease:Linear.easeNone, repeat:-1}, "rotate")

TweenLite.delayedCall(maxAnimationTime, stopAnimation);

function stopAnimation(){
  tl.pause();
}

See the Pen oXKKVJ?editors=001 by GreenSock (@GreenSock) on CodePen

 

Note I copied and pasted line 10 and it contains an invisible "\u00bb" character that may break things

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