Making morphs more smooth for simple morphs

[iz8q]

Hi tweeners,

I'm working with two different animation libraries — GSAP and AnimeJS — and I'm running into a bit of a challenge. I’ve made two versions of the same animation:

 

I’m trying to replicate the behavior from AnimeJS in GSAP, but I’m unsure how to do it or if it’s even possible with workarounds.

Here’s a comparison:

How can I achieve the "smooth" animation from AnimeJS using GSAP? Are there any properties/methods I should be using or avoiding?

Thanks in advance 🙏

See the Pen zxvGEaX by iz8q-q (@iz8q-q) on CodePen.

[mvaneijgen]

Hi @iz8q welcome to the forum!

 

The issue is that you're morphing two shapes with completely different amount of points with each other. There are probably some properties you can set (see the docs https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/), to have things look smoother for your specific setup, but the most easy and simple way (I find) is to just export your two paths with the same amount of points. 

 

Our own @PointC has a great tutorial about this https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

Hope it helps and happy tweening! 

[iz8q]

Sure I can try adding more points to make the number of points equal but out of curiosity, how does AnimeJS handle it, do you think it's possible to achieve the same effect in gsap without changing the number of points?

[GreenSock]

@iz8q Your demo illustrates a special case where the anchor points in the artwork are arranged in a rather odd way, clumped closely together unnecessarily which makes direct interpolation of those points look a little funky. 

 

Background: shapes are made up of anchor points, so in order to animate between two shapes you must map the anchor points from one shape to the anchor points in the other shape and then animate between their coordinates. If one shape has more anchors than the other, extra anchors must be fabricated on the simpler shape.

• Anime’s approach: ignore the existing anchors and plot entirely new, equally-spaced points that are connected with straight lines. So a square that has 4 anchors (one in each corner) may end up with 300 anchors instead (none of them landing exactly in the corners). With enough points, it basically looks like the same shape even though it lost fidelity (like the corners getting clipped). That also means tight curves could end up looking jagged which is why Anime allows you to define how detailed you want it. Oddly, you must choose a value between 0 and 1 to represent that resolution (default is 0.33), so you can't choose a specific number of points (unless maybe I'm missing something?). The more points, the less it drifts from the original shape but the more processing it takes to both plot them and animate them. Anime also pays no attention to where closed paths start and end (the first point in the starting shape might be in the top left corner, whereas the first point in the ending shape might be the bottom right corner), so interpolation could look quite strange as points traverse across the shape. The points don’t match up intuitively or according to proximity. Anime also doesn’t properly handle shapes that have multiple segments (like the letter “O” has one path on the outer edge, and another on the inner edge). It’s a very simplistic algorithm. 
   
• GSAP’s approach: add only as many anchors to the simpler shape as is absolutely necessary to match the more complex one. This results in 100% fidelity to the original shape. Zero loss of accuracy…ever. And we only spend resources animating the minimal number of points (performance optimization). A square uses only 4 anchors instead of perhaps 300. And GSAP figures out how to most intuitively match up the points in closed paths, so their order doesn't matter. It also handles multi-segment paths well (see demos below). 

So why did Anime’s morph look better in this particular case? The shape had anchors placed in extremely tight (and odd) configurations which created jagged spots mid-morph that weren’t aesthetically pleasing. GSAP was doing its job correctly, but the way the artwork was created had the anchors bunched up. Anime’s strategy of dumping the original anchors and creating a TON of extra points made the interpolation look nicer in that particular scenario (but worse in others).

 

Good news! 🥳

We just released an update to MorphSVG that adds a new optional "smooth" feature that solves your scenario. It adds extra "smoothing" anchor points to the artwork. Think of it like increasing the resolution, inserting points to pull on during the morph.

 

You can define a specific number of points, like smooth: 80 would redraw the path using 80 evenly-spaced anchor points (replacing all existing anchor points). Or smooth: "auto" would automatically choose a number of points based on the surface area. By default, smoothing the path will redraw it which is like tracing it at a certain resolution in order to distribute the anchor points evenly, so it loses some fidelity to the original artwork. You can use the object syntax to set redraw: false to avoid this (see details in the docs).

 

Here's an interactive demo with your shape in there, showing the new options and how they compare: 

See the Pen eed30a67cd7b5f7a0a9af5ffe5f784e3 by GreenSock (@GreenSock) on CodePen.

 

(Don't forget to try enabling "Show anchors" because that can be instructive)

 

Here's a CodePen that compares GSAP's and Anime's morphs with some relatively simple shapes: 

See the Pen 5e8f30c4d64f326ed25f7b538dd10ab5 by GreenSock (@GreenSock) on CodePen.

 

In short, you can now just enable the smooth feature in MorphSVG to get the effect you wanted. And hopefully the explanations and demos above help you understand what was going on and how it's resolved. 

 

Happy morphing! 💚