Motion path path reached event

[spassvogel]

I have a svg of a isometric world with roads and whatnot. I want to have vehicles driving around set paths. I was thinking of using MotionPathPlugin. Because of the perspective I can't use autorotate and the roads are all at 90 degrees angles from each other. In my svg I have groups for all the vehicles, and within the group I have two subgroups, one for `down` and one for `up`. The `green-truck` is what I want to animate along a path.

 

 

I was thinking to attach some sort of event to the path tween whenever a new path point is hit, in this event check if the next path destination is

1 . higher (north) than the current one (meaning nextY is less than currentY), in that case show only `-up`. if not, show `-down`

2. to the left (west) of  the current one (meaning nextX is less than currentX), in that case flip the image horizontally such that the vehicle faces left

 

 

However, I could find no such events in the documentation.

[ZachSaucier]

Hey spassvogel. There is no event that fires every single time a path point is reached. That'd be a lot of events in a very short time for some paths. And some parts of paths (like arcs) don't really have "points" so what you're asking for doesn't really make sense in those situations.

 

One alternative would  be to analyze your paths yourself and finding the progress values of those intersections where the truck is supposed to go a different direction. Then in the tween's onUpdate you can check the progress, if it's past a new progress value that you have you rotate it as needed. That way the only processing that happens is checking the progress each tick and sometimes doing a scaleX and/or switching which element is being displayed.

 

Another simpler alternative would be to break your paths into multiple paths each. Then instead of a single MotionPath tween you would have a timeline of chained MotionPath tweens with .set()s to affect the scaleX and which is displayed as necessary.

[GreenSock]

Yeah, I think Zach is right, but this helper function may or may not be useful for you: https://greensock.com/docs/v3/HelperFunctions#anchorsToProgress

[PointC]

This is a demo I made a couple years ago for another thread. I don't really remember the question or the exact specs very well, but I think it was something with a school bus making stops and the bus had to face different directions at each stop. Anyway, maybe it'll give you some ideas.

 

See the Pen rNMWooV by PointC (@PointC) on CodePen

 

Happy tweening.

[spassvogel]

Thanks all! especially Craig that looks like exactly what I need!