RobD Posted January 30, 2021 Share Posted January 30, 2021 Hello, I have an animation working well. As you scroll down, each animation (3) starts correctly and in the correct order, and when you scroll back up slowly, each animation again works as planned and in the correct (reverse) order. The problem exists when you scroll back up very quickly. If you go to the bottom of the page, then scroll back to the top very quickly, all three run in the correct order, but number two (the lightsaber) takes over and shows instead of number one. No sure what's going on here. See the Pen BaQBbwx by robdecker (@robdecker) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 31, 2021 Solution Share Posted January 31, 2021 Welcome to the forums, @Rob Decker. It looks like just a logic issue to me. You're allowing the animations to build up and conflict if the user scrolls quickly. And one wouldn't finish before the next, etc. So you could just use a variable to track the current transition animation, and then if another one gets introduced, it just makes the other one jump to the end and get killed: See the Pen 6e9c3aa56b23a1967fad1406d2b3f1f0 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 2 Link to comment Share on other sites More sharing options...
RobD Posted January 31, 2021 Author Share Posted January 31, 2021 That is exactly it! Thank you so much! 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