Jump to content


MotionPath animate to anchor along curve

Recommended Posts



I'm using MotionPathPlugin to generate a path from html points. 

I want now to animate my path with DrawSVGPlugin and jump from point to point.


The thing is I can't find a way to get the right percentage of my point in the path. 

I tried with the DrawSVGPlugin.getLength(), and my point.x but that would only work if it was a straight line.


Is there an easy way to get this percentage ?


Thank you,



See the Pen XWJVLaE by benmcarnolds (@benmcarnolds) on CodePen

Link to comment
Share on other sites

Hey neo,


Why not break the path into a few different smaller paths? That would make it easy to animate to particular points. 

Link to comment
Share on other sites

Alright, here's a solution for you: 

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


The key is this little utility function that takes a path and returns an array of the progress values associated with each anchor on that path: 

function anchorsToProgress(rawPath, resolution) {
	resolution = ~~resolution || 12;
	if (!Array.isArray(rawPath)) {
		rawPath = MotionPathPlugin.getRawPath(rawPath);
	MotionPathPlugin.cacheRawPathMeasurements(rawPath, resolution);
	let progress = [0],
		length, s, i, e, segment, samples;
	for (s = 0; s < rawPath.length; s++) {
		segment = rawPath[s];
		samples = segment.samples;
		e = segment.length - 6;
		for (i = 0; i < e; i+=6) {
			length = samples[(i / 6 + 1) * resolution - 1];
			progress.push(length / rawPath.totalLength);
	return progress;

That way, you can simply create your drawSVG tween and animate it (or set it) to the associated progress value for that particular anchor.


Make sure you're using the latest GSAP in order for this to work (MotionPathPlugin.cacheRawPathMeasurements() was added recently).


Is that what you're looking for? 

  • Like 4
Link to comment
Share on other sites

This is exactly what I was looking for !


Thank you very much Zach and Jack for the answers

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hi @GreenSock, can you explain more about the "resolution" param of anchorsToProgress function? And what is the meaning of 6 in e = segment.length - 6;

Thank you.

Link to comment
Share on other sites

Resolution is discussed in the MotionPathPlugin docs, although you will rarely ever need to use it.


resolution Number - Only applies when path is an Array. Due to the nature of bezier curves, plotting the progression of an object on the path over time can make it appear to speed up or slow down based on the placement of the control points and the length of each successive segment on the path. So MotionPathPlugin implements a technique that reduces or eliminates that variance, but it involves breaking the segments down into a certain number of pieces which is what resolution controls. The greater the number, the more accurate the time remapping. But there is a processing price to pay for greater precision. The default value of 12 is typically perfect, but if you notice slight pace changes on the path you can increase the resolution value. Or, if you want to prioritize speed you could reduce the number.


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