Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hysteresis

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:

http://greensock.com/forums/topic/13681-svg-gotchas/?p=57942

 

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.
×