Jump to content
GreenSock

court

delay after tween

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

for this example: 

See the Pen yAtip by anon (@anon) on CodePen

 

I need it to delay after yellow tween, cant find the method for delay after tween.

thanks all

Link to comment
Share on other sites

You mean a delay between the yellow box repetitions?, if so you can use repeatDelay, like this:

tl.add(TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1, repeatDelay:1 }),1);

If not, please be more specific about what you're after, if you want to delay all the boxes or just the yellow one, etc.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

found repeatDelay: to work..sorry for this

Link to comment
Share on other sites

Don't mention it, no problem at all.

 

Happy Tweening!!

Link to comment
Share on other sites

Don't mention it, no problem at all.

 

Happy Tweening!!

for this example: 

See the Pen yAtip by anon (@anon) on CodePen

 

when tweening yellowBox I have an onComplete function; it doesnt get executed. On my code I place and console.log and nothing, whats going on??

thanks!

Link to comment
Share on other sites

Simple.

 

Since your tween has a repeat:-1 parameter, it means that the instance will repeat endlessly, so it will never finish, therefore the onComplete callback will never get called.

 

You could change that to an onRepeat callback:

tl.add(TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1, repeatDelay:1, onRepeat:yourCallback }),1);

Rodrigo,

  • Like 2
Link to comment
Share on other sites

Hello court..

 

Rodrigo beat me to it :)

 

have you looked into using onRepeat instead of onComplete?

  • onRepeat : Function - A function that should be called each time the timeline repeats
  • onRepeatParams : Array - An Array of parameters to pass the onRepeat function. For example, new TimelineMax({repeat:3, onRepeat:myFunction, onRepeatParams:[mc, "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onRepeatParams:["{self}", "param2"]
  • onRepeatScope : Object - Defines the scope of the onRepeat function (what "this" refers to inside that function).

:)

  • Like 3
Link to comment
Share on other sites

is this what you guys meant: 

See the Pen yAtip by anon (@anon) on CodePen

 

If so, it doesnt not work since the function doesnt get called until it repeats, I need the hidden effect to happen just like with the onComplete.

Link to comment
Share on other sites

You need a different way to repeat your instance then.

 

Instead of using a repeat parameter you can call a function through an onComplete callback and in that function add a delayedCall to restart the instance after 2 seconds, in the same fashion a repeatDelay works:

tl.add(TweenMax.to(yellowBox, time,
{
  left:  "25px", top: "0px",
  ease:"Linear.easeNone",
  onComplete:callback, onCompleteParams:["{self}"]
}),1);

function callback(tween)
{
  //hide the yellow box
  TweenLite.set(tween.target, {visibility:"hidden"});
  //set the delay to repeat the tween after 2 seconds
  TweenLite.delayedCall(2, function()
    {
      TweenLite.set(tween.target, {visibility:"visible"});
      tween.restart();
    });
}

Rodrigo.

  • Like 2
Link to comment
Share on other sites

So court,  basically the onComplete doesn't fire because technically the tween has not completed, because the tween is repeating infinitely.

 

The below forked example shows onComplete firing after all repeats have ended (in this case one repeat), unless you have repeat set to infinite (-1) ..

 

Open your console and see the output for onRepeat and onComplete:

 

See the Pen ixsru by anon (@anon) on CodePen

 

:)

Link to comment
Share on other sites

Rodrigo, been playing around with your recommendation and here is what I get: 

See the Pen yAtip by anon (@anon) on CodePen

 

thanks!

Link to comment
Share on other sites

For this example: 

See the Pen yAtip by anon (@anon) on CodePen

The code below controls the yellowBox which obviously is not working correctly, any recommendations?

thanks

  tl.add(TweenMax.to(yellowBox, time,
{
  left:  "25px", top: "0px",
  ease:"Linear.easeNone",
  onComplete:callback, onCompleteParams:["{self}"]
}),1);


  function callback(tween) {
    //hide the yellow box
    TweenLite.set(tween.target, {visibility:"hidden"});
    //set the delay to repeat the tween after 2 seconds
    TweenLite.delayedCall(2, function()
      {
        TweenLite.set(tween.target, {visibility:"visible"});
        tween.restart();
      });
  }

 

Link to comment
Share on other sites

Well this is a tricky part of timelines that is hard to get a good grasp on.

 

The thing is that you have two instances that are repeating endlessly, that means that your master timeline will go on and on, untill the end of time. The yellow box tween is absolutely positioned at 1 second into the master timeline, so when you restart the tween it goes back to 0 seconds, but since the master timeline it's way past 1 second, immediately takes the tween to that position, so it becomes completed right away.

 

The solution is either take the tween out of the timeline or remove the tween and then add it back again at the current timeline position, like this:

function group()
{
  var tl = new TimelineMax();
  var time = 2.5;
  var redBox = DocById("redBox");
  var blueBox = DocById("blueBox");
  var yellowBox = DocById("yellowBox");
  
  var yellowTween = TweenMax.to(yellowBox, time,
    {
      left:  "25px", top: "0px",
      ease:"Linear.easeNone",
      onComplete:callback, onCompleteParams:["{self}"]
    });


  tl.add(TweenMax.to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  tl.add(TweenMax.to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  tl.add(yellowTween,1);

  function callback(tween)
  {
    //hide the yellow box
    TweenLite.set(tween.target, {visibility:"hidden"});

    tl.remove(tween);
    //set the delay to add the tween to the timeline after 2 seconds
    TweenLite.delayedCall(2, function()
      {
        // make the box visible and position it correctly
        TweenLite.set(yellowBox, {visibility:"visible", left:0});
        // add the tween in the timeline's current time
        tl.add(yellowTween, tl.time());
      });
  } 
}

function DocById(id) {
  return document.getElementById(id);
}

group();

That code should do it.

 

Please if you have more follow up questions regarding this particular issue, post it here.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Success, thanks!!!

 

Overtime it comes to a halt though, not sure how to bypass that..

 

link: 

See the Pen yAtip by anon (@anon) on CodePen

 

EDIT: Overtime it comes to a halt though, not sure how to bypass that, added link

Link to comment
Share on other sites

Success, thanks!!!

 

Overtime it comes to a halt though, not sure how to bypass that..

 

link: 

See the Pen yAtip by anon (@anon) on CodePen

 

EDIT: Overtime it comes to a halt though, not sure how to bypass that, added link

Link to comment
Share on other sites

Mhh, not sure how or why that happens, perhaps it's related with the timing mechanism, anyway I'm not the right one to answer that.

 

The solution is quite simple, just add a restart() call for the yellow box tween:

function callback(tween)
  {
    //hide the yellow box
    TweenLite.set(tween.target, {visibility:"hidden"});

    tl.remove(tween);
    //set the delay to add the tween to the timeline after 2 seconds
    TweenLite.delayedCall(2, function()
      {
        // make the box visible and position it correctly
        TweenLite.set(yellowBox, {visibility:"visible", left:0});

        // add the tween in the timeline's current time
        tl.add(yellowTween, tl.time());
        yellowTween.restart();
      });
  }

Rodrigo.

Link to comment
Share on other sites

Mhh, not sure how or why that happens, perhaps it's related with the timing mechanism, anyway I'm not the right one to answer that.

 

The solution is quite simple, just add a restart() call for the yellow box tween:

function callback(tween)
  {
    //hide the yellow box
    TweenLite.set(tween.target, {visibility:"hidden"});

    tl.remove(tween);
    //set the delay to add the tween to the timeline after 2 seconds
    TweenLite.delayedCall(2, function()
      {
        // make the box visible and position it correctly
        TweenLite.set(yellowBox, {visibility:"visible", left:0});

        // add the tween in the timeline's current time
        tl.add(yellowTween, tl.time());
        yellowTween.restart();
      });
  }

Rodrigo.

It is still happening, from what Im seeing it only happens when I switch tabs on my browser (I use chrome). 

Link to comment
Share on other sites

Mhh that's odd, I just had it running in the background in Chrome 32, on Win7 64 and keeps going. Perhaps you should clear the browser cache.

 

Anyway please download the following file and check it on a web server and localhost:

 

http://ge.tt/7etFJ3K1/v/0?c

 

Rodrigo.

Link to comment
Share on other sites

This thread is exposing a common misunderstanding and a problem that exists in most other animation engines, but GSAP has a solution. Let me explain...

 

First, let's take a step back...every animation engine works on render cycles which typically fire 60 times per second, BUT NOT ALWAYS. It depends on the processor load, what's going on in the background, how many graphics are moving around, the speed of the computer, etc. Sometimes there are delays, so the frame rate may drop lower, like 10 frames per second or even worse. 

 

The way most animation engines handle "repeats" or sequencing is by simplistic chaining so that when the tween completes, it fires a function that does something else and starts the next tween. THIS CAN CAUSE PROBLEMS because of time drift. Let's say, for example, a 1-second tween is about to finish and it renders at a time of 0.9999 seconds, but then the CPU is busy and the next render doesn't happen until 0.1 seconds later. The tween would finish on that render, of course, and start the next tween but notice we're at a time of 1.099999, almost a full tenth of a second late! Those little gaps add up over time and things can get very out-of-sync. That's what you were seeing when you switched tabs because the browser drops to 2fps in inactive tabs, and you were trying to use simple chaining to schedule things. 

 

When you set a repeat value on a TweenMax (or TimelineMax), it ensures that things stay perfectly synchronized. So in our example, the next iteration would render as if it was already 0.09999 seconds into the tween. 

 

You were using the super-precise "repeat" on all of your tweens except one where you were using a simplistic chaining technique. That's why you saw them drift apart, especially when you switched tabs. 

 

This is yet another reason why TimelineLite and TimelineMax are so useful and powerful - they allow you to schedule things precisely and everything remains perfectly synchronized. Zero time drifts. 

 

There are several ways you could approach this problem with your specific code, but I was having a tough time discerning exactly what you're trying to do (what the desired behavior is with the yellow box). Do you just want it to wait 1 second, then animate while visibility is "visible", then set visibility to "hidden" for 1 second, then repeat? Once you confirm exactly what you're looking for, I can offer a good solution. 

  • Like 2
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.
×