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

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×