Why are my SVG paths jumping when trying to morph with AnimeJS?

Question

I'm trying to morph shapes here. I got it to work with polygons. I also got morphing to work with a simple path that has 3 points , but when I'm trying to do something with my actual SVG it just throws me a bunch of errors and is super buggy. All I did was slightly move some points and anchor handles. The final result after the morphing is correct but the actual animation is not at all what I desire. The morphed path is a copy of the original with some points altered. So the amount of points and the path direction should be the same. I even checked in Illustrator.

let test = anime({
    targets: `.test path:last-of-type`,
    d: [
        { value: 'M113.14,116.59a8,8,0,0,1-3.26-15.31,45.79,45.79,0,0,0,0-83.69A8,8,0,1,1,116.38,3a61.79,61.79,0,0,1,0,112.93A8,8,0,0,1,113.14,116.59Z' },
        { value: 'M113.14,116.59a8,8,0,0,1-3.26-15.31c16.52-7.35,13.84-33.54,27.19-41.85s-10.67-34.5-27.19-41.84A8,8,0,1,1,116.38,3c22.29,9.91,44.73,38.64,21.45,82.6,0,24.39.84,20.41-21.45,30.33A8,8,0,0,1,113.14,116.59Z' }
    ],
    easing: 'easeOutSine',
    duration: 2000,
    loop: false,
    complete: function(anim) {
        anim.reverse();
    },
    autoplay: false
});

Live example

Answer 1

To implement smooth animation, it is necessary that the number of node points and their type match in all paths.

Look at the paths in the vector editor.

The large semicircle has one node point more than the small semicircle. An extra point is indicated in the figure with a red arrow.

An extra point must be removed so that the number of node points is the same on both paths.
After editing, save the file and copy the paths to another file to create animation.

Animation with SVG SMIL

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="25vw" hieght="25vh" viewBox="0 0 153.07 118.86">
    <path d="M75.75,8.72V110.15a8.7,8.7,0,0,1-14.83,6.18L35.13,90.74a11.26,11.26,0,0,0-8-3.27H11.29A11.29,11.29,0,0,1,0,76.18V42.68A11.28,11.28,0,0,1,11.29,31.4H27.18a11.27,11.27,0,0,0,8-3.28L60.92,2.54A8.7,8.7,0,0,1,75.75,8.72Z"/>
    <path d="M98.63,86.72a8,8,0,0,1-2.85-15.48,12.62,12.62,0,0,0,0-23.61,8,8,0,0,1,5.68-15,28.63,28.63,0,0,1,0,53.52A7.94,7.94,0,0,1,98.63,86.72Z">
     <animate
       attributeName="d"
       begin="0s"
       dur="1s"
       repeatCount="indefinite"
       values="
          m 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z;
        m 120.63,116.72 c -13.84288,4.29526 -17.65743,-9.06575 -10.85,-13.48 35.6227,-19.637776 34.69936,-61.423453 7.12758,-81.035919 C 110.18826,18.209024 104.23624,11.222661 108.01033,5.3312852 110.87272,0.86306533 113.31786,1.06151 117.46,2.63 c 10.57498,4.7592492 35.07508,19.514212 34.45261,56.76 -0.37039,22.162492 -8.1082,37.551535 -18.83964,49.45716 -0.90058,0.36133 -9.08042,7.1019 -12.44297,7.87284 z" /> 
    </path> 
    <path d="m 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z"/></svg>

Animation morph with AnimeJS

const small = 'm 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z';
const big = 'm 120.63,116.72 c -13.84288,4.29526 -17.65743,-9.06575 -10.85,-13.48 35.6227,-19.637776 34.69936,-61.423453 7.12758,-81.035919 C 110.18826,18.209024 104.23624,11.222661 108.01033,5.3312852 110.87272,0.86306533 113.31786,1.06151 117.46,2.63 c 10.57498,4.7592492 35.07508,19.514212 34.45261,56.76 -0.37039,22.162492 -8.1082,37.551535 -18.83964,49.45716 -0.90058,0.36133 -9.08042,7.1019 -12.44297,7.87284 z';

var timeline = anime.timeline({
  autoplay: true,
  direction: "alternate",
  loop: true
});

timeline.add({
  targets: ".test",
  d: {
    value: [
      small,
      big
    ],
    duration: 1000,
    easing: "easeOutSine"
  },
  offset: 200
});

.test {
    position: fixed;top:0;
    left:0;height: 300px;width:300px;
}
div {
width:25vw;
height:auto;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script> 
<div >
            <svg viewBox="0 0 153.07 118.86">
            <path  d="M75.75,8.72V110.15a8.7,8.7,0,0,1-14.83,6.18L35.13,90.74a11.26,11.26,0,0,0-8-3.27H11.29A11.29,11.29,0,0,1,0,76.18V42.68A11.28,11.28,0,0,1,11.29,31.4H27.18a11.27,11.27,0,0,0,8-3.28L60.92,2.54A8.7,8.7,0,0,1,75.75,8.72Z"/>
            
            <path  d="m 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z"/>
            <path class="test" d="m 120.63,116.72 c -13.84288,4.29526 -17.65743,-9.06575 -10.85,-13.48 35.6227,-19.637776 34.69936,-61.423453 7.12758,-81.035919 C 110.18826,18.209024 104.23624,11.222661 108.01033,5.3312852 110.87272,0.86306533 113.31786,1.06151 117.46,2.63 c 10.57498,4.7592492 35.07508,19.514212 34.45261,56.76 -0.37039,22.162492 -8.1082,37.551535 -18.83964,49.45716 -0.90058,0.36133 -9.08042,7.1019 -12.44297,7.87284 z"/>
            
            </svg>
        </div>