Michael31 Posted October 22, 2022 Share Posted October 22, 2022 On my wheel event, I want to animate the position of a sentence along an svg path. I wrote my sentence several times so I can reset the textpath position to pretend it loops infinitely. At the moment it works great. My only issue is that when I reset the textpath position I lose the easing of the previous tween. I read this post and it helped a lot (from what I understand, you can't make a quickTo with svg attributes) : Here's my code : let attr = {}, myTween = gsap.to("#myTextPath", {attr: attr, duration: 0.5, ease: "power3"}), old = 0 window.addEventListener('wheel', (e) => { attr.startOffset = -old + '%'; old = old + e.deltaY/10 if(old > distanceReset){ gsap.killTweensOf('#myTextPath') gsap.set("#myTextPath", { attr:{ startOffset:"0%" }, }) old = 0; }else{ myTween.invalidate().restart(); } }) How can I reset my tween position and make it seemless ? Thank you very much See the Pen XWqvQjG by michaelgrc (@michaelgrc) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 22, 2022 Solution Share Posted October 22, 2022 One of your duplicates had an extra "u" in "longue" which threw off your calculations. I think this approach with a proxy, wrap(), and quickTo() would be cleaner and more performant: See the Pen NWMQQJL?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 3 Link to comment Share on other sites More sharing options...
Michael31 Posted October 23, 2022 Author Share Posted October 23, 2022 That helps a lot. Amazing solution. Thank you very much! 1 Link to comment Share on other sites More sharing options...
Michael31 Posted October 24, 2022 Author Share Posted October 24, 2022 Eventually, I've one last issue with this solution : I'm working with es6 classes and I don't manage to access the offset value in an external scope. I tried to replace let offset with this.offset but it's not read inside the proxy object anymore. Is there a way to convert the getter and setter of the proxy with arrow functions ? Thanks you very much See the Pen qBKWVdo?editors=0010 by michaelgrc (@michaelgrc) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted October 24, 2022 Share Posted October 24, 2022 There are many ways to accomplish that. Here's one: See the Pen qBKWpeN?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Michael31 Posted October 24, 2022 Author Share Posted October 24, 2022 Once again, thank you! 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