Animate Arrow Brush Along Path

[Anthony Hamill]

Trying to animate an arrow along a path, but I would like the arrows to morph along the path. On top of that, the path will change during the animation. Is this possible with GSAP?

[PointC]

Sure, you can do all that with GSAP. I think this thread could help you.

 

Happy tweening.

 

[Anthony Hamill]

Thank you for your reply. Your example is very close, but not not quite what I'm looking for. I'd like those arrows to move along the path, while the body of the arrow morphs to the shape of the map. Everything I've seen is a single element moving along the path, but not changing shape. Maybe the best way to describe it would be an animated dashed line along a path, but the each dash has a chevron or triangle on the tip of it.

[PointC]

That thread was just to show you how to animate along a path that is changing during the animation as that's the tricky bit of what you're trying to do. Morphing a target object as it follows the motion path is fairly straight forward. Plop your morph elements into a group and have the group follow the motion path. Then you just need a separate tween on the timeline to handle the actual morph. 

 

Basic example.

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

 

Happy tweening.

 

[Anthony Hamill]

Ok, I've gotten pretty close to what I was looking for, but I'm still a bit short. I'm guessing I'm going to need to do some calculations to get the arrow heads to sync up with the arrow bodies.

See the Pen zYmzzzB by ahamill85 (@ahamill85) on CodePen

[PointC]

hmmm... that's a bit different than the first post was describing. I don't see any morph nor is the path changing during the animation. You could certainly do some calculations to drop the arrowheads into the correct positions, but since you're a Club member, I'd probably use DrawSVG and the MotionPath plugin together to get to the most flexible solution. 

 

Happy tweening.

[Anthony Hamill]

Yeah, I think I shouldn't have used the phrase "morph along the path". Maybe the better terminology would be the body of the arrow would "snake along the path". Also, I didn't introduce the path changing, yet. That is still part of the requirement for this project.