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