Jump to content
Search Community

Looking for a little help with TimelineMax?

AbhishekSock test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 2
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.
×
×
  • Create New...