Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bsipple57

Trouble Positioning Nested Timelines on Parent Timeline

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

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

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.

×