Noa

Hi Craig, Thanks so much for all your help on this. I've been tweaking the code to move closer to my goal of animating a bus along a route, and I've been adapting your code to achieve this. Moving forward, all is well, but once I begin backward movement, things get a little out of whack (the bus skips around the route, sometimes jumping between the end and a later segment). Any idea what might be causing the behavior? I've also tried to add some "stops" along the route, which is where I'd ultimately like to get the bus to stop rather than at corners - any idea how I could get the bus to skip corners?

PointC, You've actually described it much better than I did! By "tweening to the polyline points" do you mean splitting each segment up into its own timeline? Currently my "direction checking" basically looks like finding the destination point and determining whether I'm traveling forward to that point or backward to that point. Are you thinking it would be smarter for me to check the direction on clicking the next/previous buttons?

With a lot of help from the folks in this topic, I've been working on changing a class on the #tile element as it moves along a path so the tile's color corresponds to the direction it's traveling. I'm using the onStart parameter of TweenMax.to(), but the issue is that starting a new tween before the last is complete seems to immediately trigger the onStart function even though the tile hasn't arrived at the right position, resulting in the class being added before the tile is on a given segment/direction. Is this because calling the main function is restarting the timeline, and is there a way to delay the calling of a function until the tile has reached a certain segment? Clicking 'next' a few times quickly in the codepen causes the classes to change before the tile has arrived on the relevant segment. EDIT It looks like the answer might be in onStartParams, but I'm not quite sure what I'd specify there to achieve the desired behavior.

I have one more question (although I'm not sure if it would be better to break this out into a separate post): I've been working on changing a class on the #tile element so the tile's color corresponds to the direction it's traveling. I'm using the onStart parameter of TweenMax.to(), but the issue is that starting a new tween before the last is complete seems to immediately trigger the onComplete, resulting in the class being added before the tile is on a given segment/direction. Is there a way to delay the calling of a function until the tile has reached a certain segment? Here's a codepen demonstrating the behavior I'm seeing (clicking 'next' a few times quickly causes the classes to change before the tile has arrived on the relevant segment).

Thanks for your help PointC!

I'm currently working on incorporating the segmented animation for the polyline and tile, but for some reason the animation stops are not aligning with the segments - can anyone see what I may be missing? The animation distances seem to become progressively smaller until the last, rather than moving from point to point. Here's a pen with my progress:

Craig, Thanks, this is really helpful! I've been reading through the docs to try to find a way to specify a point on the path (as opposed to a percentage) to animate to - I see that I may be able to use addLabel(), but that's still only allowing positions in the timeline for positioning, not a point on the polyline. Is there a method that might allow me to accomplish that? Maybe as a workaround, I should determine at what point in the timeline the tile will have reached each point on the polyline and add labels at those time points?

Thanks Craig! I'm thinking of independently animating each segment of the polyline so I can have the tile move to the end of the first segment, then wait for a click and continue to the second segment, etc. Would the best way to do this with MorphSVG be to break the path out into multiple polylines, or is there a way to achieve this level of control with MorphSVG and a single polyline?

Thanks Carl, Looks like MorphSVG makes the most sense. I am working on pausing/resuming the progress of the animation (using a button for now with .pause() ) based on some other examples in the forums, but it doesn't seem to be working - any ideas what I'm doing incorrectly? Codepen is

I'm attempting to animate an SVG shape along an existing SVG polyline. I'm trying to determine if this is possible to do using Timeline Max and animating to each of the points of my polyline progressively. I know I can pass x and y values a given element (say, "#tile") should be moved relative to its current position: tl.to("#tile", 0.5, {x:0, y:285.4}) but I'd like to know if it's possible to pass specific coordinates for the SVG canvas so the element can move to those coordinates rather than just a set number of units from its current position. This way, I could enter the coordinates for each point on my polyline and have the #tile element move to each progressively. The reason I'd like to move to actual SVG coordinates is that I want this svg and animation to be resizeable, and it also seems to be the most logical way to follow an existing path/polyline in an SVG. I have an in-progress codepen showing the polyline I'd like to follow along with some tweening with the relative position that I'd like to replace with coordinates: