Jacks Posted January 8, 2023 Share Posted January 8, 2023 I'm trying to create an infinitely scrolling horizontal animation using GSAP. It works great, until I reverse the animation, go into negative time and change the time scale multiple times. To reproduce in the CodePen, press reverse, then spam the toggle speed button until the blue rectangle moves incorrectly. I fixed several of the original issues using this form post, but not all. A few notes about the CodePen. Code is written pretty oddly because I ripped it out of my current code base where I'm implementing this as a directive in a reactive framework. Spamming the speed toggle is just to reproduce mouse movement, which will be controlling the speed, I just didn't include all that code. Blue and red squares are clones in the real case. They are different colors for clarity. I'm sure there is a better way to make this animation work, and I would be open to it if it fixed my problem. See the Pen MWBJjVY by jack_s (@jack_s) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 9, 2023 Share Posted January 9, 2023 Hi @Jacks. Thanks for reporting it and providing a clear minimal demo. I'll look into it and get back to you. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 10, 2023 Solution Share Posted January 10, 2023 I believe I figured it out. It boils down to the fact that you used a negative delay which is very unusual (I don't think I've ever seen someone do that in my 13+ years of doing this) It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js In the meantime, though, you can work around it by simply adjusting the totalTime() instead of setting a negative delay(). // old tl.delay(offset ? 0 : -5); // new offset || tl.totalTime(5); See the Pen qByrmjp?editors=0010 by GreenSock (@GreenSock) on CodePen Better? 2 Link to comment Share on other sites More sharing options...
Jacks Posted January 10, 2023 Author Share Posted January 10, 2023 6 hours ago, GreenSock said: I believe I figured it out. It boils down to the fact that you used a negative delay which is very unusual (I don't think I've ever seen someone do that in my 13+ years of doing this) It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js In the meantime, though, you can work around it by simply adjusting the totalTime() instead of setting a negative delay(). // old tl.delay(offset ? 0 : -5); // new offset || tl.totalTime(5); Better? I guess I'm too used to CSS animations. Setting total time worked prefect. Thank you. 1 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