MotionPath animate to anchor along curve

[neo420]

Hello,

 

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,

 

Ben

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

[ZachSaucier]

Hey neo,

 

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

[GreenSock]

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? 

[neo420]

This is exactly what I was looking for !

 

Thank you very much Zach and Jack for the answers

[MikeYuen]

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.

[OSUblake]

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

 

Quote

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.