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.