Jump to content
GreenSock

pietM

Sequencing a Nested Timeline

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

Screen-Shot-2020-06-15-at-10.00.44-AM.jpg

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 :) 

  • Like 1
Link to comment
Share on other sites

 🤦‍♂️ 

Link to comment
Share on other sites

Thank you, Zach! 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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().

  • Like 1
Link to comment
Share on other sites

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

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.
×