SVG morphing with anime.js

user_9755283 0
Viewed 7327

I'm trying to make an SVG animation where first I draw the animation in Adobe illustrator then I get the code and animate it with anime.js.

I'm animating (changing) only the "d" attribute in the SVG. I encountered a problem as same as the problem in the tutorial I was following:

youtube tutorial (19:20)

Seems my SVG code is not exported properly or I'm doing something wrong with the anchor points.

StartUpTimeline.add({
  targets: morph,
  d: [
   { value: 'M0,0,1,360S184,253,440,254c245,1,346,236,520,236,182,0,277-189,559-189,183,0,402,100,402,100V1Z' },
  ],
  easing: 'easeInQuint',
  duration: 1500,
 })
<svg id="morph" height="100%" width="100%" viewbox="0 0 1920 1080" preserveAspectRatio="none"> 
      <path class="morph" fill="#002e3a" 
   d="M0,0H1S184-1,440,0C685,1,786,0,960,0c182,0,246,1,528,1h433Z"/>
</svg>

anime.js svg css
1 Answers

I experienced a similar issue of messy transitions when morphing between SVGs created in Adobe Illustrator.

I solved it by making sure that:

  1. The paths have the same number of anchor points. (You can check this in AI by opening the Document Info window and selecting 'Objects'.)

  2. The paths are drawn in the same direction, starting from the same corner. Otherwise you get a crossing over of points during the morph, as the first node of the first shape moves to the position of first node of the second shape etc.

Here's a demo.

let shapes = [
    {
        d: "M1037.5,253.5c-159.2-139.1-508-173-508-173l-444,899l737-253l262,328C1084.5,1054.5,1187.2,384.3,1037.5,253.5z"
    },
    {
        d: "M926.5,301.5c-159.2-139.1-793-135-793-135l38,925l244-330l606,354C1021.5,1115.5,1076.2,432.3,926.5,301.5z"
    }
]


var morph = anime({
    targets: '.morph-path',
    d: [
        {value: shapes[0].d},
        {value: shapes[1].d}
    ],
    duration: 5000,
    direction: 'alternate',
    autoplay: true,
    easing: 'linear',
    elasticity: 100,
    loop: true
});

I found this tutorial helpful.

user_80504290
Related