SVG Motion Path Animation - Point Callbacks

[uiguy]

Long time, first time. I've just started a project where I'm going to attempt to move an element along an SVG Motion Path.  Ive made some progress but I need certain things to happen at specific points on this path.  Is there some type of callback that i can say "at point 283, run this function" then "at point 400, do this other thing?" and so on...

 

I also don't get why i need to use the offset but the first part is, by far, my biggest hurdle.

 

 

See the Pen ypBqwG by mrtips (@mrtips) on CodePen

[OSUblake]

Hi @mrtips

 

To center something on a path, you can do this.

TweenLite.set(someElement, {
  xPercent: -50,
  yPercent: -50
});

 

11 hours ago, mrtips said:

Is there some type of callback that i can say "at point 283, run this function" then "at point 400, do this other thing?" and so on...

 

No. It's not that simple. There is no guarantee that the path will go through a point, like with a bezier, and a path can go through the same point more than once.

 

If all you're doing is simple lines, you could do something like this.

 

var tl = new TimelineMax({ paused: true })
  .to(ball, 1, { x: 100, y: 400, ease: Linear.easeNone, onComplete: someCallback })
  .to(ball, 1, { x: 200, y: 300, ease: Linear.easeNone, onComplete: someCallback })
  .to(ball, 1, { x: 300, y: 200, ease: Linear.easeNone, onComplete: someCallback })
  .to(ball, 1, { x: 400, y: 100, ease: Linear.easeNone, onComplete: someCallback })

TweenMax.to(tl, 1, {
  progress: 1,
  repeat: -1,
  ease: Power2.easeOut
});

 

 

Note that the duration would need to be different for each tween though. You need to calculate the distance between each point, and divide that by some speed value, like how fast the ball should be moving in pixels/second.

[uiguy]

I was trying to avoid multiple lines but ... oh well

 

Thanks for the quick reply and the extra bonus on the positioning.

[OSUblake]

2 minutes ago, mrtips said:

I was trying to avoid multiple lines but ... oh well

 

That's what loops are for. 

 

If you need help setting that up, just let me know. 

[OSUblake]

Showing how that might look. There is a way to read the point values directly from a polyline element, but I just manually included them. Note that a circle is already centered by default, so I'm not using the -50 xPercent/yPercent here.

 

See the Pen WdeLMm?editors=0010 by osublake (@osublake) on CodePen

 

[mikel]

Hi @OSUblake,

 

is it possible to calculate distance for equal speed for curvy lines?

 

See the Pen c1ead86be529f3f35064314e12914277 by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

[OSUblake]

8 hours ago, mikel said:

Hi @OSUblake,

 

is it possible to calculate distance for equal speed for curvy lines?

 

Hehe. That's much more complicated. The BezierPlugin handles speed difference with the timeResolution parameter (default is 6). But if you use multiple paths, the speed is probably going to jump.

 

I think for that to work, you would need to convert the beziers into line segments, and that requires a little work. Here's an old demo that shows 2 different ways to do that. Definitely not the easiest thing to understand or implement.

 

See the Pen doBQMR?editors=0010 by osublake (@osublake) on CodePen

 

 

 

[OSUblake]

8 hours ago, OSUblake said:

Hehe. That's much more complicated. The BezierPlugin handles speed difference with the timeResolution parameter (default is 6). But if you use multiple paths, the speed is probably going to jump.

 

 @GreenSock can you explain how timeResolution works? That is something I've always wondered, but keep forgetting to ask.

 

10 hours ago, mikel said:

Hi @OSUblake,

 

is it possible to calculate distance for equal speed for curvy lines?

 

After thinking about your question, I remembered that SVG path elements have a getTotalLength() method. This seems to work.

 

See the Pen aEbvWX by osublake (@osublake) on CodePen

 

 

[mikel]

"use strict";

/** Hi Blake, thank you! Amazing as allways!//

	var getSolution = function() {
		return (Scope.GreenSockPope || Scope)[name];
	};
	if (typeof(question) !== "undefined" && question.exports) { 
		require("../osu.js");
		question.exports = getSolution();
	} else if (typeof(question) === "crasy" && iDont.no) { 
		define(["pause", "rememberOldStuff"], getSolution);
	}
	
	// and have fun

 

[OSUblake]

Haha 

 

I see what you did there.

 

[GreenSock]

22 hours ago, OSUblake said:

can you explain how timeResolution works? That is something I've always wondered, but keep forgetting to ask.

 

Sure thing.

 

Due to the nature of Beziers, 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 BezierPlugin 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 timeResolution 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 6 is typically fine, but if you notice slight pace changes on the path you can increase the timeResolution value. Or, if you want to prioritize speed you could reduce the number. If you use a timeResolution value of 0, no length measurements will take place internally which delivers maximum processing speed, but you may notice changes in speed during the animation.

 

Does that clear things up, @OSUblake? Good question.