Trouble Positioning Nested Timelines on Parent Timeline

[bsipple57 0 Likes (Newbie)]

Hello everyone,

 

I'm having a bit of trouble adding a series of nested timelines to a parent timeline for multiple iterations of a for loop. 

 

In short: For each iteration, I'm trying to add 3 nested timelines to a parent timeline -- and have nested TLs #2 and #3 play 0.5 seconds after nested TL #1. 

 

The code is part of a much larger scene, so I think it might be the most helpful to give the general structure ...

 

let

     parentTL = new TimelineMax(), 

     childTL1, 

     childTL2,

     childTL3,

     uniqueLabel;


for (let i of sequences) {

     

     childTL1 = createChildTL1();

     childTL2 = createChildTL2();

     childTL3 = createChildTL3();       


     uniqueLabel = createUniqueLabel();


     parentTL.add(childTL1, uniqueLabel);

     parentTL.add([childTL2, childTL3], uniqueLabel + '+=' + '0.5');

}

 

For some reason that I can't figure out,  the parent timeline only plays the child timelines from the first iteration of the loop -- and then it stops.

 

If, instead, I write this within the for loop...

 

parentTL.add([childTL1, childTL2, childTL3]);

... all child timelines will execute, for every iteration -- but of course, they'll do so all at once on every iteration, and I can't achieve the proper offsetting that I was originally going for.

 

I could certainly post my fuller source code if it helps, but I'm thinking that with this pattern alone, I'm overlooking something simple with regards to the Art of Positioning... something that's causing the follow-up timelines to be lost after that first iteration. 

[OSUblake 9,990 Likes (Superhero)]

Provide an CodePen because that will work. You're creating the same animation in a loop, which means after the first animation is is done, all of the repeated animations will be at their end state. Try using fromTo tweens.

[OSUblake 9,990 Likes (Superhero)]

Here, look at the console in this example.

 

See the Pen 75a642e95f1cf2f3c66ca55bc78c6836 by osublake (@osublake) on CodePen

[Carl 9,066 Likes (Superhero)]

Great demo, Blake. And yes if createTL1(), createTL2(), and createTL3() each create timelines on the same target each time, then you are absolutely right about them all being in their "end state" by the time they play.

 

My guess was that uniqueLabel() may not have been generating a unique label.

 

Bsipple, the problem with supplying partial code is that we have to guess what functions like createTL1() and uniqueLabel() do and wonder if they are working right.

If you need more help, please edit Blake's demo so we can see exactly what you are doing.

 

Thanks!