Duo Posted September 27, 2023 Share Posted September 27, 2023 Hi, I have an element that rotates infinitely 360 degrees using GSAP. I've also implemented direction-based rotating on scroll using ScrollTrigger. It works great initially but once you begin to scroll either up or down and the scrolling stops, the element jumps to its original rotating position and begins rotating again which isn't ideal. This is the code that I'm using: gsap.to(this.rotatingText, {rotation: 360, duration: 40, repeat: -1}); var rotate = gsap.timeline({ scrollTrigger: { trigger: "html", scrub: 0.2, start: "top top", end: "+=10000" } }).to(this.rotatingText, { rotation: 360 * 5, duration: 1, ease: "none" }) Ideally, I would love it to, be that after scrolling, it gets the element's current rotated position and then begins rotating again from that point. You can view a video screenshot of the issue here: https://www.veed.io/view/6de5e2cc-072e-45d7-bb30-d015766ae546?sharingWidget=true&panel=share Any help would be greatly appreciated. Thanks Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 27, 2023 Share Posted September 27, 2023 You could wrap your rotatingText in another element and animate that element on scroll, then with the ScrollTrigger onEnter and onLeave callbacks pause the initial tween and play it again. It is a bit hard to give advies when there is no minimal demo in which we can poke around, so this is the best I can do for now. The issue you're facing is because two tweens animate the same element and the same property, so you could also look in to overwrite: true on the second tween or instead of a fixed pixel value make it dynamic with `+=${360 * 5}`, but having two distinct elements is the best way to go in my opinion. Hope it helps and happy tweening! Link to comment Share on other sites More sharing options...
Duo Posted September 27, 2023 Author Share Posted September 27, 2023 Hi @mvaneijgen Thanks for getting back me to so quickly. It's greatly appreciated. I've created a quick CodePen for you here: See the Pen mdaLGpZ by dayneh88 (@dayneh88) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted September 27, 2023 Solution Share Posted September 27, 2023 Something like this. Hope it helps and happy tweening! See the Pen VwqxEOm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 27, 2023 Share Posted September 27, 2023 Hi, I would do it like this: See the Pen qBLYQZa by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
Duo Posted September 27, 2023 Author Share Posted September 27, 2023 You are a superstar @mvaneijgen Thank you so much for being super quick and helpful. 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