Browser crash while using the motion path plugin

[dragoon]

Hello,

I've been trying to migrate some old animated weather codepen from TweenMax to GSAP 3 and everything works except for the Bezier animation.

I've prepared a codepen, where you can click on the wind icon, and you can see that it completely crashes the browser tab (I'm using Chrome).

In the old TweenMax code, it was animating leafs in SVG.

Would appreciate any pointers.

See the Pen XWjVxrM by rprokofyev (@rprokofyev) on CodePen

[GreenSock]

Ah, I see the problem - you've got your motionPath animation using a .fromTo() and you're duplicating your starting values. You're setting the x,y at the start of the tween AND you're feeding the same values in as the start of the path Array, so MotionPathPlugin is choking on the almost-zero space between those points (I say "almost" because there's rounding applied to the x/y transforms but your Array has the raw values). In other words, it's trying to plot a path from 10,43 (for example) through 10.000001,43. 

 

The easy fix is to just omit those first values from your path Array so that you're not duplicating it with the "from" values. 

 

I've patched the next release of MotionPathPlugin to sense this condition. You can preview that at https://assets.codepen.io/16327/MotionPathPlugin.min.js

 

And here's a fork with the fix in place:

See the Pen 91fe851d0ed67e59ed394249985239aa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

 

Oh, and I'd recommend using the string-based eases instead of stuff like Power2 (it's just "power2" as a string). And Power0 could be replaced with "none" or "linear". 

 

Happy tweening!

[dragoon]

Thanks a lot, yes it fixes the problem! I am quite new to the GSAP, just wanted to adapt this old codepen for my private dashboard