jakob zabala Posted March 28, 2021 Share Posted March 28, 2021 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 More sharing options...
GreenSock Posted March 29, 2021 Share Posted March 29, 2021 The origin only really matters if you set type: "rotational" 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! 4 Link to comment Share on other sites More sharing options...
jakob zabala Posted March 29, 2021 Author Share Posted March 29, 2021 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 More sharing options...
PointC Posted March 29, 2021 Share Posted March 29, 2021 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. 3 Link to comment Share on other sites More sharing options...
GreenSock Posted March 29, 2021 Share Posted March 29, 2021 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 More sharing options...
jakob zabala Posted March 29, 2021 Author Share Posted March 29, 2021 @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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now