Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kryvons_v

Dynamic change timeline: add tween at timeline beginning

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

Hi there! Thank you one more time for a such great library.

 

On my codepen when I press "down" button square to starts move down. If you press the "reverse" button during this time, the following behavior is expected. First, the square returns to its initial position, and then starts moving to the right.
So, I need to add a tween at the beginning of the timeline in such a way that to shift the following siblings.


In my codepen I add tween at the beginning of the timeline but it has no influence for next siblings.

See the Pen qjBQvp by kryvonos_v (@kryvonos_v) on CodePen

Link to comment
Share on other sites

Hi, thanks for the demo.

I'm not really understanding what you mean by siblings.

 

I would not recommend trying to use one timeline in a way that dynamically fluctuates like this. I'm not aware of all the requirements of your project, but to get your demo to work as described you can tween the timeline back to a time of 0 using tweenTo() and then have an onComplete callback create a tween that moves along the x axis like:

 

See the Pen ZyYEgB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Along a similar approach to what you took you could add a new tween to the beginning of the timeline and then shift the startTime() of the vertical tween forward but then you would also have to adjust the playhead position too. This approach of adding animations and shifting others unfortunately will become a nightmare if you allow the user to press multiple buttons at whatever rate and sequence they choose. 

 

 

I think a better solution than the one I presented is to dynamically create new timelines on each button click, but again without knowing how many buttons or directions the user can choose i hesitate to take this too far.

  • 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.
×