Animating SVG polygon down path, not working as expected in loop

[mthomson]

This is my first time trying to use the Bezier plugin and I'm very confused as to what I'm doing wrong here?

 

In the codepen example I've attached, I've added borders to show where to hover to fire the animations.

 

I'm trying to loop through a bunch of SVGs and tell the polygon inside of each of each SVG to animate down the path inside the same SVG.  

 

If you hover over the box on the far left, this is acting exactly as expected - the arrow animates down the path and does a little bounce at the end. 

 

However, none of the other ones inside the loop work as I'd like. The positioning of their arrows get progressively worse and I'm not sure why?

I've logged the path data that I'm passing to the timeline and it looks correct, so I'm really confused as to where I've gone wrong in my code.

 

Any help is greatly appreciated

See the Pen mVKEmp by MandyMadeThis (@MandyMadeThis) on CodePen

[Carl]

Thanks for the demo. Very helpful.

 

I hacked it up quite a bit trying to figure out what was happening.

You will see that I moved some of the svgs around (using css) to see them better.

 

The big issue seems to be that some of the pointers had transform attributes like:

 

<path class="pointer" d="M313.3,176.4c11.5-61.3,10.2-141.2,9.3-167.6" transform="translate(-296.8 0)"/>

 

That seemed to either mess up MorphSVGs calculations or perhaps override what MorphSVG was trying to do. So I removed it.

 

 

Also, by using the align property in the pathDataToBezier method I was able to get each arrow to be aligned to its path

 

var arrowPathToFollow = MorphSVGPlugin.pathDataToBezier(line[0], {align:arrow[0]});

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

 

I think you will find that this is closer to what you want:

 

http://codepen.io/GreenSock/pen/gPjJON?editors=0110

 

Also, it appears that you might be drawing each pointer rotated so that it is pointing the way  it should be at the end of the path. You might want to experiment with drawing them all pointing right (0 degrees) and then use autoRotate in your bezier tween like

 

.to(arrow, 1, {bezier:{type:"cubic", values: arrowPathToFollow, autoRotate:true} },"-=0.25"));

[mthomson]

Thank you Carl, you are a Legend! I could not figure out what was going on?! Now I can work with this - thank you so much