Arrggg: Not sure why TimelineMax.delay() is not working

[peterPotter]

I have a straightforward TimelineMax code (seen below) and I can't get the TimelineMax

.delay method to work. It is not working at all.

 

var tl = new TimelineMax (),
delayTime = 8,
box1 = $(".box1");

tl.delay (delayTime);
    tl.shiftChildren (delayTime, true, 0); // EVEN this is not working (I used this just as a test, since delay is not working)
    tl.set (boxesParent, {perspective:400});
    tl.to (box1, 0.7, {rotationY:-125, transformOrigin:"right top", ease:Expo.easeOut, onComplete:hideDiv, onCompleteParams:[box1]}, "initAni");
// Other code removed for brevity.

 

 

[GreenSock]

I notice a few problems:

1. You didn't define "boxesParent" anywhere, so that'll throw an error in your JS and prevent anything from working. 
2. You performed the "shiftChildren()" call BEFORE any children existed. So that would have no effect - the TimelineMax was empty at that point. 

The delay(delayTime) worked great for me. And when I corrected the order of your shiftChildren() call, that worked too. Are you using the latest version of the JS files? If you're still having trouble, please post a simple codepen or jsfiddle that clearly demonstrates the issue and we'd be happy to help. 

[peterPotter]

Thanks for the prompt reply.

 

1. I purposely removed some of the code when I posted it here, like the initialization of the boxesParent. My code doesn't have erros, and I do have the boxesParent

 defined, but it is good that you have make note of this.

 

2. At what point specifically should the shiftChildren() be called?

 

3. It looks like I am using version="1.9.6" of TweenMax. I donwloaded the files a couple weeks ago.

 

All the animations and everything else is working fine, except for the delay. In fact, I don't think I have ever gotten the tl.delay() method to work, although I did get the delay property to work when I added it to vars object. But I don't want to use the delay property, because I want to delay the entire timeline, not just a couple animations.

 

Could you change the subject of this post? Simple removed this "Arrggg: 

"
Thanks.

[Rodrigo]

Hi,

 

Like Jack said delay is working but be aware that it'll work only in the first execution of the timeline, in further executions it won't work.

 

Like Jack said the shift children should be, at least after the first one or after the childrens you want 

delayed by that amount of time. Imagine that you have an empty egg tray and another one with two eggs and someone tells you to move your eggs two "spaces", sure in the second tray there'll be no problem, but in the first one?, wouldn't be the most logical answer to say: "dude, the tray has no eggs, errrrr!!!!". That's pretty much what's happening, you're telling the timeline to move it's children by "delayTime" but at the moment you're saying that the timeline is empty, therefore there's nothing to move.

 

It should be like this:

tl
    .set (boxesParent, {perspective:400})
    .to (box1, 0.7, {rotationY:-125, transformOrigin:"right top", ease:Expo.easeOut, onComplete:hideDiv, onCompleteParams:[box1]}, "initAni")
    .shiftChildren(delayTime, true, 0);

I set up a little example so you can see both methods working:

See the Pen iodrh by rhernando (@rhernando) on CodePen

 

The sample has the delay method working, in order to see the shiftChildren() method working comment out line 9 and uncomment line 26; and reverse the process to go back to the delay method.

 

Hope this helps,

Cheers,

Rodrigo.

[peterPotter]

I have found the reason the delay was not working:

Whenever I call any of these (tl.removeCallback(), tl.kill(), tl.clear()) methods, the delay() method does not work. And it doesn't matter whether I add those methods before the delay () method call or after it, delay simply doesn't work when any of those methods are called.

 

I just went back and analyzed how the entire code is executing and I have fixed the problem. I simply added an if statement to only removeCallback or kill or clear, if the browser had cached the tl object. I am good now.

 

Thanks very Jack and Rodrigo.

[GreenSock]

I tried clear() and it worked great (before and after). And you certainly shouldn't kill() a timeline and then expect it to work later. removeCallback() worked fine for me too unless you literally passed null as the callback in which case it interpreted that as you wanting to kill the timeline. 

 

If you're still having trouble, would you mind posting a very simple codepen or jsfiddle that demonstrates the issue? We'd love to help. I know you said you resolved things for now, but I'm still really curious about some of the symptoms you mentioned. 

[peterPotter]

Jack, Thanks.

 

I will post my findings in a few days after I launch my app. I am almost done.