timelinemax Looking for a little help with TimelineMax?

[AbhishekSock 6 Likes (Newbie)]

First of all sorry for not posting codepen URL, for some reason, my code isn't executing on codepen.

 

Below is the TimelineMax code I prepared for the kind of animation I need.

 

 tl
      .to(panel1, 0.3, {width:'50%',ease:Power3.easeOut})
      .to(panel2, 0.3, {left:'50%', ease:Power4.easeOut},panel1)
      .to(panel2, 0.3, {height:'50vh',width:'25%', ease:Power1.easeOut})
      .to(panel5, 0.3, {width:'25%',height:'50vh',left:'75%'},panel2)
      .to(panel3, 0.3, {top:'50%'},panel2)
      .to(panel3, 0.3, {width:'25%',height:'50vh'})
      .to(panel4, 0.3,{left:'75%',width:'25%',top:'50%'});

You could see how panel2 and panel3 have more than one ".to"  that is because of the kind of animation I need where panel2 should first get to 50% left and then get to 50vh height, 25% width. Now, I want panel5 to follow along with panel2 but not the first panel2 but the second one. How can I target only the second panel2 (the one with height: '50vh', width:'25%') for the panel5?

Hopefully, it makes sense to you.

 

Thank you so much in advance. Any help is appreciated.

[Sahil 2,541 Likes (Superhero)]

Always try to post a demo even if it isn't working, sometimes problem can be completely unrelated to JavaScript so it is easier to find it plus we have something to work with.

 

What you need is labels, you can pass string as label and any tweens with same label will start together irrespective of their position. You were doing it mostly correct though just wasn't using labels correctly. Following are two tutorials that will explain in depth,

 

https://www.youtube.com/watch?v=sXJKg8SUSLI

 

https://www.youtube.com/watch?v=QO1mLs96krY

 

See the Pen eePXRL?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[AbhishekSock 6 Likes (Newbie)]

19 minutes ago, Sahil said:

Always try to post a demo even if it isn't working, sometimes problem can be completely unrelated to JavaScript so it is easier to find it plus we have something to work with.

 

What you need is labels, you can pass string as label and any tweens with same labels will start together irrespective of their position. You were doing it mostly correct though just wasn't using labels correctly. Following are two tutorials that will explain in depth,

 

https://www.youtube.com/watch?v=sXJKg8SUSLI

 

https://www.youtube.com/watch?v=QO1mLs96krY

 

See the Pen eePXRL?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Thank you so much, Sahil ji. I will definitely keep that in mind. Labels really helped. Appreciated.