Morph SVG fixing kinks

[jakob zabala]

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

[GreenSock]

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!

[jakob zabala]

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";

[PointC]

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.

[GreenSock]

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 👍

[jakob zabala]

@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!!