SVG morph not morphing smoothly - anime js

Question

I am trying to create a simple SVG morph using Anime JS but the SVG doesn't transition smoothly as you can see below it jumps. Does anyone know why this is happening?

const SVG_PATHS = [
 { value: "M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" },
   { value: "M1920,466H0V359s159-60,960-73S1920,0,1920,0Z" }
];

const MORPH_SVG = anime({
   targets: ".path",
   d: [
      SVG_PATHS[1], 
      SVG_PATHS[0]
      ],
   easing: "linear",
   duration: 5000,
   loop: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 349" class="svg_curve">
 <path style="fill: #000;" d="M1920, 349H0V242s468-52.44, 1160-73.33S1920, 0, 1920, 0Z" class="path"/>
</svg>

score 2 · Accepted Answer · answered Jul 31 '19 at 10:58

Use SVG_PATHS[0] as value for the path

const SVG_PATHS = [
 { value: "M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" },
   { value: "M1920,466H0V359s159-60,960-73S1920,0,1920,0Z" }
];

const MORPH_SVG = anime({
   targets: ".path",
   d: [
      SVG_PATHS[1], 
      SVG_PATHS[0]
      ],
   easing: "linear",
   duration: 5000,
   loop: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 349" class="svg_curve">
 <path style="fill: #000;" d="M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" class="path"/>
</svg>

Thanks, but what did you change? – Reece Jul 31 '19 at 11:03 — Reece, Jul 31 '19 at 11:03
The d attribute for the path – enxaneta Jul 31 '19 at 11:15 — enxaneta, Jul 31 '19 at 11:15

Alexandr_TT · Answer 2 · 2019-07-31T20:26:32.523

In my answer I want to give general recommendations for the implementation of smooth animation and consider them with a specific example of the author of the question.

The main condition for the implementation of smooth animation path changes using the attribute d are:

The same number of nodes
Exact match of the node type (A; C; Q), respectively, for each point in the initial and final position of the path

These conditions can be met in different ways, but it is better to do this in the vector editor.

The image below shows the initial path in the vector editor, which needs to be converted to the final path observing the conditions of identity and the same number of node points.
The red arrows show the nodes that need to be moved.

To move selected anchor points, you must mark them with a click while holding shift
Then hold down the Ctrl key, place the cursor on the selected point and move the entire curve to the final position of the animation.

Save the file in a vector editor in the format * .svg and copy the formula of the finalpath

Animation implementation

Now we have fomula initial and final paths. To implement the animation of the attribute d path use the commandSMIL

<animate attributeName="d" values="`begin path`;`final path`" .... />

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 349" class="svg_curve">
 <path style="fill: #000;" d="M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" class="path">
  <animate attributeName="d"
    values="
     M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z;
     M1920,466H0V359s159-60,960-73S1920,0,1920,0Z"
  dur="5s"
  fill="freeze"
        />
 </path>
 </svg>

To loop the animation, add the values attribute begin path:

<animate attributeName="d" values="`begin path`;`final path`;begin path" .... />

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 349" class="svg_curve">
 <path style="fill: #000;" d="M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" class="path">
  <animate attributeName="d"
    values="
     M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z;
     M1920,466H0V359s159-60,960-73S1920,0,1920,0Z;
  M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z"
  dur="5s"
  fill="freeze"
  repeatCount="indefinite"
        />
 </path>
 </svg>

UPDATE

Bypassing the limitations of exact matching the number and types of nodal points allows the plugin kute-svg.js

Plugin usage example

SVG morph not morphing smoothly - anime js

2 Answers2

Animation implementation