Jump to content
GreenSock

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

Timeline reverse

Recommended Posts

Hi,

 

I am wondering if timeline can be played less than 0 when animation reversed.

Please see my pen.

I would like the animation to be playing in reverse even it has reached the start time.

You can control the animation direction scrolling the mouse wheel.

Can it be done somehow? It stops now as it reaches progress 0. There is no problem to play in forward direction as the repeater function does it job and it works as expected in reverse mode as well. I tried to create separate timeline for the repeater function and tried to set progress: 1 for the timeline starts at line 48.

My question might be confusing.

 

 

See the Pen WNNBaMw by Lacika1981 (@Lacika1981) on CodePen

Share this post


Link to post
Share on other sites
1 minute ago, Lacika1981 said:

My question might be confusing.

Indeed it is :D  Not too much though.

 

2 minutes ago, Lacika1981 said:

I would like the animation to be playing in reverse even it has reached the start time.

Can it be done somehow?

Strictly speaking, a timeline cannot have a negative time because there would be no animation to use. But you can use the onReverseComplete callback function to set the progress to the end:

onReverseComplete: () => tl.progress(1).reverse()

 

However, if all that you're doing is moving an element across the screen in either direction, I would recommend a much simpler approach:

1) Move the element using relative values, i.e. x: "+=5" or something.

2) Use the modifiers plugin to keep the value in the range that you desire.

3) When appropriate, either kill the old tween and create a new one in the opposite direction or add a new tween of double the speed in the opposite direction to a parent container to move it the other way.

 

That would be much simpler than worrying about a timeline's state all the time :) 

  • Like 2

Share this post


Link to post
Share on other sites

Thank @ZachSaucier,

 

I saw your answer just now and already made something else that is not working(yet).

I will put that question in a new thread as it is a bit different question.

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.

×