Share Posted November 29, 2017 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. Link to comment Share on other sites More sharing options...
Share Posted November 29, 2017 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 3 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 29, 2017 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. 2 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