Compound Path animation weirdness

[webhound]

This animation is supposed to be a quadrilateral the whole time.  It's three compound paths.  I also tried this with two paths originally.  When it animates it does it in an undesirable way, though I'm fairly sure it's not gsap but possibly the way the svg was created?  Any tips would be much appreciated.

 

Click it to see it work.

 

Thanks!

See the Pen XWbrEeG by webhound2 (@webhound2) on CodePen

[ZachSaucier]

Hey webhound and welcome to the GreenSock forums!

 

I'm not sure exactly what the goal is, but this seems to be the perfect use case for our MorphSVGPlugin! It has an incredibly handy feature called shapeIndex that lets you change which points are morphed between.

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

[Shrug ¯\_(ツ)_/¯]

To get a clean result when tweening "attr" and path points you need the same number of points throughout from start to end. Otherwise yes you will typically get weirdness with varying numbers of points with that approach. The MorphSVG plugin would easily help you if you need to use varying numbers of points like you have shown.

[webhound]

15 hours ago, ZachSaucier said:

Hey webhound and welcome to the GreenSock forums!

 

I'm not sure exactly what the goal is, but this seems to be the perfect use case for our MorphSVGPlugin! It has an incredibly handy feature called shapeIndex that lets you change which points are morphed between.

 

 

That's nice, and i figured Morph would do.  Unfortunately it ain't free

[webhound]

15 hours ago, Shrug ¯\_(ツ)_/¯ said:

To get a clean result when tweening "attr" and path points you need the same number of points throughout from start to end. Otherwise yes you will typically get weirdness with varying numbers of points with that approach. The MorphSVG plugin would easily help you if you need to use varying numbers of points like you have shown.

 

 Thanks!  I'll modify the svg for now, and see if I can get it working.  I don't really wanna pay for morph at the moment.

[ZachSaucier]

10 minutes ago, webhound said:

Unfortunately it ain't free

9 minutes ago, webhound said:

I don't really wanna pay for morph at the moment.

You and 99% of our other clients  But there's a time and a place for everything. 

 

MorphSVG solves not only the issue that you bring up here but also a bunch of other cross-browser inconsistencies that you can run into such as issues with transform:

 

I highly encourage you to read this article about the why behind the GSAP license because ultimately we believe it's a good thing for not only us but also our users. 

 

[ZachSaucier]

Another way to think of it: how much time will you spend trying to figure out a solution to this issue (including the time it took to research, post in this forum, and read the responses. Not to mention the time it will take to modify the paths and develop the animation). Then multiply that by how much you believe your time is worth. Now compare that to the price of a Shockingly Green membership. It may pay for itself with just this one situation.

 

But even if not, then think of how many other issues GSAP fixes for you or gives you the powers to do. We believe that the cost of our membership pays for itself very quickly, usually within the first day or two. And you get access to Club GreenSock tools for a year and to work on unlimited projects! We think it's a steal.