Jump to content


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

Moderator Tag
Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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]});




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




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"));

  • Like 5
Link to comment
Share on other sites

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

  • Like 1
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.