Jump to content
Search Community

Animating a textpath position and make it loop infinitely

Michael31 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

  • Michael31 changed the title to Animating a textpath position and make it loop infinitely

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...