Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Snapping animated text on SVG path w/ ScrollTrigger

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 2
Link to post
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.