Jump to content


Arrow Grow Animation - can't get it to work right with MorphSVG

Recommended Posts

I am trying to get a curved arrow to grow along a path, but having difficulty making it work correctly. Does anyone have any suggestions on how to make this work? MorphSVG doesn't work as desired, as I need to have it look like it the arrow head is leading the growth, rather than just transforming into another shape.


Right now my codepen uses a mask to gradually show the line and I am moving the arrow head along a path using "pathDataToBezier". Which works okay, but it doesn't synchronize with the mask animation... despite my efforts to change timing and positioning of the mask, there must be a better way!

See the Pen ZWOVvO by dchadney (@dchadney) on CodePen

Link to comment
Share on other sites

Hi DanChadney  :)


I think part of the problem here is using a big circle as a mask for your arrow path. Getting the timing right on that can be a bit tricky. Since you're a Club member, you can use the drawSVG plugin to help with this.


I did a little write-up about revealing dashed strokes with the drawSVG plugin and masks here:



As part of that post, I made a demo which should help you quite a bit. I have a little airplane flying over a map revealing a dotted path as it moves. This is basically the same thing you're doing with the arrowhead and path. Here's the CodePen:

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


Hopefully that will give you some ideas and a direction to go with your project.


Happy tweening.


  • Like 3
Link to comment
Share on other sites

Happy to help.


I'm glad you got it working. It looks good. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.