Lacika1981 Posted November 25, 2019 Share Posted November 25, 2019 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 More sharing options...
ZachSaucier Posted November 25, 2019 Share Posted November 25, 2019 1 minute ago, Lacika1981 said: My question might be confusing. Indeed it is 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 2 Link to comment Share on other sites More sharing options...
Lacika1981 Posted November 25, 2019 Author Share Posted November 25, 2019 Thank you @ZachSaucier I try to update the code as you recommended. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 25, 2019 Share Posted November 25, 2019 A simple implementation of my suggestion above using GSAP 3: See the Pen mddYZVJ?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Lacika1981 Posted November 29, 2019 Author Share Posted November 29, 2019 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now