Weird flicker with animated SVG using AnimeJS

Question

I have an SVG (created in inkscape) that I'm trying to animate with AnimeJS. I'm encountering an issue where there's a weird flicker at the beginning/end and I can't seem to understand what's going on.

This is what the original unanimated image looks like:

For those who don't want to view the code and animation in codepen, here's my code:

• HTML:

anime({
  targets: ".in-between",
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: "easeInOutSine",
  duration: 1000,
  delay: function (el, i) {
    return i * 250;
  },
  direction: "alternate",
  loop: true
});

body {
  background: orange;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

svg {
  display: block;
  width: 300px;
  height: auto;
  margin: -400px;
  margin-bottom: -800px;
  margin-left: -120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 450 500">
  <defs id="defs18296">
    <linearGradient id="linearGradient53191" inkscape:swatch="solid">
      <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0" id="stop53189" />
    </linearGradient>
    <linearGradient inkscape:collect="always" id="linearGradient22030">
      <stop style="stop-color:#025fea;stop-opacity:0.98039216;" offset="0" id="stop22026" />
      <stop style="stop-color:#3d33ff;stop-opacity:0.84313726;" offset="0.5" id="stop35883" />
      <stop style="stop-color:#001e48;stop-opacity:0.75;" offset="1" id="stop22028" />
    </linearGradient>
    <linearGradient inkscape:collect="always" id="linearGradient21994">
      <stop style="stop-color:#0267ff;stop-opacity:1;" offset="0" id="stop21990" />
      <stop style="stop-color:#3d33ff;stop-opacity:0.84313726;" offset="0.46784565" id="stop35329" />
      <stop style="stop-color:#000000;stop-opacity:0.6875;" offset="0.9356913" id="stop21992" />
    </linearGradient>
    <linearGradient inkscape:collect="always" xlink:href="#linearGradient21994" id="linearGradient21996" x1="120.6" y1="306" x2="491.5" y2="306" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.0006759,0,0,1.0006764,-0.08185734,-0.08183979)" />
    <linearGradient inkscape:collect="always" xlink:href="#linearGradient22030" id="linearGradient22034" x1="191.2" y1="306.75" x2="423.60001" y2="306.75" gradientUnits="userSpaceOnUse" />
    <mask maskUnits="userSpaceOnUse" id="mask55679">
      <g id="g55685" transform="matrix(0.99997331,0,0,0.99997372,0.00511139,0.01115302)" style="display:inline;stroke-width:37.8;stroke-dasharray:none" inkscape:label="leafMasks">
        <rect style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:111.056;stroke-linecap:square;stroke-opacity:1;paint-order:fill markers stroke" id="rect55681" width="263.88611" height="264.0845" x="174.19429" y="174.19521" inkscape:label="white" />
        <path class="in-between" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:58.525;stroke-linecap:square;stroke-opacity:0.992983;paint-order:fill markers stroke" d="m 347.67644,32.910318 -221.27341,0.07319 c 0,0 -18.04449,-0.176691 -30.878738,4.225154 -12.83425,4.401856 -25.72862,12.629879 -34.350133,20.373176 -8.621511,7.743298 -17.765323,20.85466 -23.591585,34.42473 -5.826262,13.570072 -6.194437,32.153612 -6.194437,32.153612 l 0.0403,225.02331 215.669193,-0.0134 c 0,0 12.09681,1.80921 30.06518,-2.65155 17.96837,-4.46076 30.72287,-13.82392 40.92833,-22.94117 10.20546,-9.11724 18.62805,-23.08334 23.16588,-34.01662 4.53785,-10.93327 6.41942,-27.33301 6.41942,-27.33301 V 32.910318" id="path55683" sodipodi:nodetypes="cczzzccczzzcc" inkscape:label="black" transform="matrix(1.0002978,0,0,1.0002974,116.55746,115.05363)" />
      </g>
    </mask>
  </defs>
  <style type="text/css" id="style18283">
    .st0 {
      fill: #00ABF3;
    }

    .st1 {
      fill: #FFFFFF;
    }
  </style>
  <g id="g18291" transform="matrix(0.99972893,0,0,0.999729,-116.52787,-115.03058)" style="stroke-width:1.1003;stroke-dasharray:none">
    <path id="f" class="st1" d="M 260.6,242.8 H 423.1 V 189.2 H 251 v 0.1 c -2.7,0 -5.4,0 -8.1,0 -18.5,0 -32.9,8.2 -43.1,23.5 -5.6,8.4 -8.1,17.9 -8.1,28 0,16.9 0,33.9 0,50.8 v 0 132.7 h 53.6 V 333.5 H 389.7 V 280 h -144 c -0.4,-0.3 -0.5,-0.8 -0.5,-1.7 0.1,-5.7 0,-11.4 0,-17.1 0,-10.1 6,-17.1 15.4,-18.4 z" style="display:inline;fill:url(#linearGradient22034);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.1003;stroke-opacity:1" />

    <path id="leaf" class="st1" d="m 491.25003,121 c 0,0 -192.63012,0 -247.9675,0 -11.1075,0 -22.11494,1.30088 -32.92224,4.20284 -16.81135,4.60311 -31.92156,12.40839 -45.43068,23.5159 -9.50642,7.90534 -17.6119,17.01149 -24.4165,27.41853 -7.20486,11.10751 -12.40838,23.01555 -15.71061,35.82421 -2.70182,10.5071 -3.7025,21.21434 -3.7025,32.12171 0,70.24748 0,140.3949 0,210.64238 v 0 36.52468 h 81.85529 v 0 c 56.03786,0 112.07571,0 168.11356,0 8.90602,0 17.71197,-1.00067 26.41785,-3.10209 13.80932,-3.20217 26.71804,-8.60582 38.62609,-16.4111 14.2096,-9.20622 25.91751,-20.91413 35.22379,-35.02367 13.50913,-20.51386 19.91345,-43.22922 19.91345,-67.74579 0,-39.42665 0,-78.75323 0,-118.17988 0,0 0,0 0,0 0,-31.12103 0,-62.142 0,-93.26303 v 0 z m -53.43609,64.44356 c 0,61.74173 0,123.38339 -0.10007,185.12512 0,11.20758 -2.60176,21.81475 -8.00541,31.62138 -9.00608,16.41109 -22.51521,27.41853 -40.42731,32.92225 -6.20419,1.90129 -12.70858,2.70183 -19.31304,2.70183 -31.32116,0 -195.73222,0 -195.73222,0 v -11.00744 0 c 0,-61.8418 -0.10006,-123.78367 0,-185.62547 0,-16.11089 5.50372,-30.42056 15.81068,-42.72888 8.80595,-10.40703 19.81339,-17.6119 32.92224,-21.41447 5.80392,-1.70115 11.70791,-2.60176 17.81203,-2.60176 60.04056,0 196.83296,0 196.83296,0 z" style="display:inline;fill:url(#linearGradient21996);fill-opacity:1;stroke:none;stroke-width:1.10104;stroke-opacity:1" inkscape:label="leaf" mask="url(#mask55679)" />
  </g>
</svg>

Are there any recommendations or advice on what I can do about the weird flickering?