Snapping animated text on SVG path w/ ScrollTrigger

[oligsap]

Hi everyone,

 

I've managed to animate text on an SVG path but I can't manage to make the animated text arrive in the center of the screen when the snap stops. It either stops before or after the center. I'd tried to mess with the snapTo without success.

 

Thanks for your help

See the Pen OJNKKKx by olig (@olig) on CodePen

[mikel]

Hey @oligsap,

 

Welcome to the GreenSock Forum.

 

I am not sure what exactly you want to achieve.

Here an option

 

See the Pen ExyYaye?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[ZachSaucier]

Hey oligsap. A couple of big issues here:

• Your tweens of the text paths don't have a linear ease so the percentage of the distance traveled is not equal to the progress. You should either compensate for that or just use a linear ease.
• You're trying to snapTo values as if the text path animations were the only tweens inside of the timeline. But they're not - you have other tweens which affects the total percentages. So again, either compensate or change it to where that's not the case.

I'm also not sure why you need textPathLength as it's always 0 or why you have a delay of 0...

 

Here's how I'd do it:

See the Pen mdEbeZN?editors=0010 by GreenSock (@GreenSock) on CodePen

[oligsap]

Hi @mikel, @ZachSaucier,

 

Thank you very much for your feedbacks. It helped me a lot to get where I wanted to go !