Jump to content
GreenSock

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

Compound Path animation weirdness

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites
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 ;)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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. 

 

  • Like 2

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×