Jump to content
Search Community

Timeline reverse

Lacika1981 test
Moderator Tag

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

Link to comment
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
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...