pietM Posted June 15, 2020 Share Posted June 15, 2020 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 More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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 1 Link to comment Share on other sites More sharing options...
pietM Posted June 15, 2020 Author Share Posted June 15, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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 More sharing options...
pietM Posted June 15, 2020 Author Share Posted June 15, 2020 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 More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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 1 Link to comment Share on other sites More sharing options...
pietM Posted June 15, 2020 Author Share Posted June 15, 2020 🤦♂️ Link to comment Share on other sites More sharing options...
pietM Posted June 15, 2020 Author Share Posted June 15, 2020 Thank you, Zach! Link to comment Share on other sites More sharing options...
pietM Posted June 15, 2020 Author Share Posted June 15, 2020 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 More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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(). 1 Link to comment Share on other sites More sharing options...
pietM Posted June 15, 2020 Author Share Posted June 15, 2020 Got it. Thanks again for your quick responses and support! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now