Jump to content
Search Community

Why it's not morphing properly?

bdrtsky test
Moderator Tag

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

Hi!

 

Trying to figure out morphing thing. I made a circle in Illustrator, turned it to the path, then I also made a blob from this circle (with the same 4 anchors). Now I am trying to morph `path` one in another and having this bugs:

 

See the Pen VgoyYy by bdrtsky (@bdrtsky) on CodePen

 

I am not sure why this happening?

How to morph this 2 shapes (w\out using MorphSVG right now, I need to figure this out first). 

See the Pen VgoyYy by bdrtsky (@bdrtsky) on CodePen

Link to comment
Share on other sites

After reading this topic, I assume this happens because Illustrator messed up `path` (even while having same 4 anchors)? 

 

Here it says that I need not only same points/anchors, but same sequence, and only thing that could change is numbers. While Illustrator exports absolutely different `d` points.

Link to comment
Share on other sites

Well, it's not really that Illustrator is "messing up", per se - it's just that it tries to save the paths in as succinct a way as possible and the path commands end up being very different. In this case, you're trying to...
 

//go from this: 
"M400,250A150,150,0,1,1,250,100,150,150,0,0,1,400,250Z"

//to this:
"M379,268c0,82.8-19.2,126-102,126S69,377.8,69,295S188.2,65,271,65S379,185.2,379,268z"

 

Notice there are completely different path commands ("A", "c", and "S") and quantities of numbers. Part of the magic of MorphSVGPlugin is that it solves all of those problems for you - it interprets all the data and normalizes it into cubic beziers and also synthesizes extra points where necessary to ensure that things can be smoothly morphed and interpolated. 

 

When you try to do the tween with just AttrPlugin, it finds all the numbers in the strings, matches them in order (first number in the starting string with the first number in the ending string, etc.) and just tries interpolating. But of course that won't make any sense here. See the problem? 

 

If you're just trying to kick the tires a bit, keep in mind that MorphSVGPlugin is totally free to use on codepen. In fact, all the bonus tools are. See https://codepen.io/GreenSock/full/OPqpRJ/

 

Here's a fork of your codepen with MorphSVG doing its magic: 

See the Pen 35f6c2a8f947abe020926e6d33cfc0fb by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

 

Also, if you know the shapes have the same number of anchors, you could tap into MorphSVGPlugin's static methods to just convert the starting and ending values into cubic bezier data for consistency, and then plug that in (sounds like you did that with shapeshifter which I'm not familiar with): 

console.log("START:", getCubicPathData(blob.getAttribute("d")));
console.log("END:", getCubicPathData(morphData));
function getCubicPathData(data) {
  return MorphSVGPlugin.rawPathToString(MorphSVGPlugin.stringToRawPath(data));
}

 

But again, that's not going to solve the issue of mis-matched quantities of anchors. I think you'll find that just letting MorphSVG do all that work for you is gonna save you a lot of headaches. We also introduced rotational morphing recently too, in case you didn't see: 

 

Happy tweening!

 

  • Like 3
Link to comment
Share on other sites

@GreenSock yep, with MorphSVG it works like a breeze. No need to hustle with third-party tooling! 

 

I have a question about licensing (can't find related topic on forum). How to handle licensing for the clients in situation when I am agency representative/developer and I need GSAP plugins work on different clients websites. I can't find licensing terms regarding this. Can you please clear this up, so I don't need to create another topic? Or should I better write to support? Thanks!

Link to comment
Share on other sites

47 minutes ago, bdrtsky said:

I have a question about licensing (can't find related topic on forum). How to handle licensing for the clients in situation when I am agency representative/developer and I need GSAP plugins work on different clients websites. I can't find licensing terms regarding this.

 

Yeah, we try to keep things pretty simple and developer-friendly. No unlock codes, no need to register (or pay for) each site/project, etc. It's a simple annual (or permanent) system that's ultimately based on the honor system - we believe that if we extend respect to our users and treat them like adults who want to do the right thing, that respect will be reciprocated. 

 

The commercial license covers and unlimited number of your Work Products (sites/apps/games) while it's active. And it extends to your clients as long as they don't edit your work. So, for example, if you develop sites for 20 clients and charge them, your license covers it all. But if they want to start making changes to what you created for them, they'd need to get their own license. Make sense? Otherwise, a huge company could circumvent the license by just hiring a freelancer to start a project, have the freelancer get a single-developer GreenSock license, and then have their 100-developer team take over. That'd be weird. See what I mean? 

 

I'd strongly recommend reading https://greensock.com/why-license and https://greensock.com/licensing.

 

Does that answer your question? 

  • Like 2
Link to comment
Share on other sites

Thank you for a such reasonable approach for licensing. I completely agree with your vision, and want to add, that some Clients could have hard times with managing all this licencing. Especially thanks for clarifying the scenario when Client continue maintaining the website without our help, this certainly should be mention in Contract, that licencing doesn't cover that. Very cool, absolutely love that! 

  • Like 2
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.
×
×
  • Create New...