Sequencing a Nested Timeline

[pietM]

Hi again everyone, 

 

I have a simple pen with two timeline instances. Is there a way to play these in a linear sequence (from No. 1 to No. 2), rather than playing at the same time? Another newbie question, but the community response is teaching me a lot! 

 

With appreciation, 
M

See the Pen yLeaNOO by euqio (@euqio) on CodePen

[ZachSaucier]

Hey piet. I highly recommend that you read my article on animating efficiently since it covers how to loop through elements and create animations like this.

 

The main issue here is that you're splitting all of your texts in the same split. You need to split each panel individually. Same thing with creating an animation.

See the Pen qBbaOdg?editors=0010 by GreenSock (@GreenSock) on CodePen

[pietM]

Thank you, Zach! 

 

This is basically what I'm looking for! But, the second animation is placed in the relative position and animates below "No.1".  When I change the panel position to absolute, I lose animation for "No.1".

 

Is there a way to simply replace the sequence "No. 1" with sequence "No.2"? 

 

I have an updated pen here:

See the Pen gOPwajg by euqio (@euqio) on CodePen

 

Please let me know. 
Very much appreciate your attention, 
M

 

[ZachSaucier]

Yep, that's a CSS question. Just make them position: absolute; or hide the non-active ones by setting the display to none.

[pietM]

Thank you, Zach! 

 

That's what I thought, but when I change the value to absolute I lose the first sequence. 

I have a simplified pen here: 

See the Pen gOPwajg by euqio (@euqio) on CodePen

 

Thanks again for your attention! 
Really appreciate it,

M

 

[ZachSaucier]

4 minutes ago, pietM said:

That's what I thought, but when I change the value to absolute I lose the first sequence. 

That's because you have a background color on your panel so the first one is covered up  

[pietM]

 🤦‍♂️ 

[pietM]

Thank you, Zach! 

[pietM]

Last question for this thread, Zach. 

 

Is there a reason why the sequence stops once I add repeatRefresh to master timeline? I assume this would reset the random elements on repeat. 

Simplified pen enclosed: 

 

See the Pen wvMzzgX by euqio (@euqio) on CodePen

 

Thanks for looking! 
M

[ZachSaucier]

Your from and to values are the same after the first play through. The easiest way to fix it is to use a .fromTo() instead of your .from().

[pietM]

Got it. Thanks again for your quick responses and support!