Devotee007

Stop looping banner after a set amount of seconds?

Recommended Posts

Hi,

 

Is there a away to loop through a set of animations for, let's say 30 seconds and then stop?

 

//Devotee007

  • Like 1

Share this post


Link to post
Share on other sites

Loop thru several animations in that space of time? Or play a sequence and have it loop until 30 seconds have elapsed? Or Play an animation for 30 seconds and then stop it?

 

In any case, you can achieve that with a TweenMax.delayedCall(); here's the docs

Share this post


Link to post
Share on other sites

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 4

Share this post


Link to post
Share on other sites

Great job, Dipscom! 

 

Those are all great follow-up questions. I had similar concerns.

Share this post


Link to post
Share on other sites

Sorry for my not so in depth question. I meant stop a timeline loop after a certain amount of time, so Carl gave me the answer I was looking for. Thanks a lot for the help Dipscom and Carl.

 

//Devotee007

Share this post


Link to post
Share on other sites

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 ?

 

http://codepen.io/celli/pen/wKrdXY

Share this post


Link to post
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;

 

http://codepen.io/jonathan/pen/gaGxLa

 

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

Share this post


Link to post
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...

Share this post


Link to post
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:

 

http://codepen.io/jonathan/pen/gaGxLa?editors=001

 

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

Share this post


Link to post
Share on other sites

Thanks Jonathan, A lot to learn :)

Share this post


Link to post
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();
};

Share this post


Link to post
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:

 

http://codepen.io/GreenSock/pen/yhEmn

 

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.

 

:)

Share this post


Link to post
Share on other sites

@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();

}

 

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

Share this post


Link to post
Share on other sites

I see no snow fallin'...

Share this post


Link to post
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.