Jump to content
GreenSock

jakob zabala

Morph SVG fixing kinks

Recommended Posts

So I have adjusted the origin of all the individual letters (changing shape index made no difference) and this was the best morphing result I could get.

Is there anything I can adjust to make the kinks and bumps in the morph any smoother? I have reduced the amount of points in my paths as much as possible... but maybe there is possibility to adjust things in illustrator.

 

 

See the Pen OJWXOJV by jaykobz (@jaykobz) on CodePen

Link to comment
Share on other sites

  1. The origin only really matters if you set type: "rotational"
  2. You nested your "ease" inside of the morphSVG object, and you used the old object-based value instead of the simpler string-based one:
    // BAD
    gsap.to("#id", {
      morphSVG: {
        shape: "#other-id",
        ease: Power4.easeOut
      }
    });
    
    // GOOD
    gsap.to("#id", {
      morphSVG: {
        shape: "#other-id"
      },
      ease: "power4.out"
    });

     

As for morphing in a way that makes the inbetween shapes perfectly smooth, that isn't really feasible. Imagine each individual point must animate to its final destination along some path (by default, it's linear). 

 

To get the absolute best shape morphs (and it may not be "perfect" in the way you're visualizing) is to edit the raw artwork so that you have exactly the same number of points in the start and end shape(s). So you can start with one shape, put the other (destination) one behind it, and literally drag each point to its destination on the other and tweak where necessary. It's all about artwork preparation, as @PointC often points out (his motiontricks.com site is great). 

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Thanks for the detailed answer. Yes I wanted to confirm there wasn't a 'smoothing' property in the gsap morph before I synced up points as close as possible in illustrator.

 

To your 1. point: Yes the default I set to rotational so, is this correct, 

MorphSVGPlugin.defaultType = "rotational";
Link to comment
Share on other sites

Hi @jakob zabala :)

 

Yeah, I think these tutorials could help.

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

 

Just my opinion, but I think duration is also really important in morphing. Fast usually covers any oddities. Here's an older demo of mine with some fun letter morphing. Maybe it'll give you some ideas too.

See the Pen yPbYRY by PointC (@PointC) on CodePen

 

Happy tweening and morphing.

:)

  • Like 2
Link to comment
Share on other sites

2 hours ago, jakob zabala said:

To your 1. point: Yes the default I set to rotational so, is this correct, 


MorphSVGPlugin.defaultType = "rotational";

Yep 👍

Link to comment
Share on other sites

@PointC

 

Yes thanks for the articles, will study them, This is exactly what I was looking for. I did heavily clean up my points but i want exact with the amount of points. 

Yes, speed looks like the problem, unfortunately, I really like the slow speed!!

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.
×