<div class="controls">
  <input type="range" id="range" step="0.0001" value="0">
  <button onclick="play()">play</button>
  <button onclick="stop()">stop</button>
</div>

<div class="animations">
  <div class="animation">
    <svg viewBox="0 0 173 106.5">
<path id="signupkeyframe" fill-rule="evenodd" clip-rule="evenodd" fill="#4AA3EB" d="M92,78.5c0-2.2,1.8-4,4-4s4,1.8,4,4c0,2.2-1.8,4-4,4
  S92,80.7,92,78.5" data-spirit-id="keyframe" style=""></path>
<path id="signupled-right-bottom" fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M132,78.5c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4
  c0,2.2-1.8,4-4,4C133.8,82.5,132,80.7,132,78.5" data-spirit-id="led-right-bottom" style=""></path>
<path id="signupled-right-top" fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M132,60.5c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4
  c0,2.2-1.8,4-4,4C133.8,64.5,132,62.7,132,60.5" style="" data-spirit-id="led-right-top"></path>
<path id="signupled-left-bottom" fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M54,78.5c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4
  c0,2.2-1.8,4-4,4C55.8,82.5,54,80.7,54,78.5" data-spirit-id="led-left-bottom" style=""></path>
<path id="signupled-left-top" fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M54,60.5c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4
  c0,2.2-1.8,4-4,4C55.8,64.5,54,62.7,54,60.5" data-spirit-id="led-left-top" style=""></path>
<path id="signuptimelines-background" fill="none" stroke="#9329D1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="
  M106.2,79.5h19.4 M66.6,79.5H86 M66.6,60.4h59.5 M57,31.5h81" data-spirit-id="timelines-background"></path>
<g>
  <defs>
    <rect id="signupmask" x="54" y="26.5" width="86.5" height="62" data-spirit-id="mask" style=""></rect>
  </defs>
  <clipPath id="signupmask_1_" data-spirit-id="mask_1_">
    <use xlink:href="#signupmask" overflow="visible"></use>
  </clipPath>

    <path id="signuptimelines" clip-path="url(#signupmask_1_)" fill="none" stroke="#550887" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="
    M106.2,79.5h19.4 M86,79.5H66.6 M66.6,60.4h59.5 M57,31.5h81" style="" data-spirit-id="timelines"></path>
</g>
<path id="signupbar" fill-rule="evenodd" clip-rule="evenodd" fill="#9329D1" d="M115,46.5L115,46.5c-2.8,0-5-2.4-5-5.4V21.9
  c0-3,2.2-5.4,5-5.4c2.7,0,5,2.4,5,5.4v19.2C120,44.1,117.7,46.5,115,46.5" style="" data-spirit-id="bar"></path>
<g id="signuppause" data-spirit-id="pause" style="">
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M-6,41.4L-6,41.4c-2.2,0-4-1.7-4-3.7V24.4c0-2.1,1.8-3.7,4-3.7
    c2.2,0,4,1.7,4,3.7v13.2C-2,39.7-3.8,41.4-6,41.4"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M5.5,41.4L5.5,41.4c-2.2,0-4-1.7-4-3.7V24.4c0-2.1,1.8-3.7,4-3.7
    c2.2,0,4,1.7,4,3.7v13.2C9.5,39.7,7.7,41.4,5.5,41.4"></path>
</g>
<path id="signupplay" fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M29.8,41.5l8.2-8.1c1.3-1.3,1.3-3.4,0-4.7l-8.2-8.1
  c-2.1-2.1-5.8-0.6-5.8,2.4v16.3C24,42.1,27.6,43.6,29.8,41.5" data-spirit-id="play" style=""></path>
</svg>
  </div>

  <div class="animation">
    <svg viewBox="0 0 188 128">
<path id="shadow" fill-rule="evenodd" clip-rule="evenodd" fill="#D6D7DA" d="M107.2,111.4H79.3c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4
  h27.9c2.2,0,4-1.8,4-4C111.2,113.2,109.4,111.4,107.2,111.4" data-spirit-id="shadow" style=""></path>
<g id="file" data-spirit-id="file" style="">
  <g id="background_1_" data-spirit-id="background_1_">
    <polyline id="background" fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" points="111.7,12.3 60.3,12.3 60.3,100.4
      125.5,100.4 125.5,26.2 111.7,12.3     " data-spirit-id="background"></polyline>
    <path id="border" fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M111.7,12.3v-2H60.3c-0.5,0-1,0.2-1.4,0.6
      c-0.4,0.4-0.6,0.9-0.6,1.4v88c0,0.5,0.2,1,0.6,1.4c0.4,0.4,0.9,0.6,1.4,0.6h65.2c0.5,0,1-0.2,1.4-0.6c0.4-0.4,0.6-0.9,0.6-1.4
      V26.2c0-0.5-0.2-1-0.6-1.4l-13.8-13.8c-0.4-0.4-0.9-0.6-1.4-0.6V12.3l-1.4,1.4L123.5,27v71.4H62.3v-84h16.5h32.9V12.3l-1.4,1.4
      L111.7,12.3" data-spirit-id="border"></path>
  </g>
  <path id="corner" fill-rule="evenodd" clip-rule="evenodd" fill="#4AA3EB" d="M126.9,24.7l-13.8-13.8c-0.6-0.6-1.3-0.7-2-0.4
    c-0.7,0.3-1.1,1-1.1,1.8v13.8c0,0.5,0,1,0.4,1.3s0.7,0.5,1.2,0.5h13.8c0.8,0,1.5-0.4,1.8-1.2C127.6,26.1,127.5,25.3,126.9,24.7z" data-spirit-id="corner" style=""></path>
</g>
<circle id="particle-2" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#1DCB8B" stroke-width="2.5" stroke-miterlimit="10" cx="94" cy="49.2" r="3.8" data-spirit-id="particle-2" style=""></circle>
<circle id="particle-1" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#1DCB8B" stroke-width="2.5" stroke-miterlimit="10" cx="108" cy="49.2" r="3.8" data-spirit-id="particle-1" style=""></circle>

<g id="arrow-container" data-spirit-id="arrow-container">

  <defs>
    <rect id="arrow-mask" y="35" width="92" height="55" data-spirit-id="arrow-mask" style=""></rect>
    <clipPath id="arrow-masker" data-spirit-id="arrow-masker">
      <use xlink:href="#arrow-mask" overflow="visible"></use>
    </clipPath>
  </defs>

  <g clip-path="url(#arrow-masker)">
    <path id="arrow" fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M4.5,59.9l-8.2-8.2
      c-0.8-0.8-1.8-0.8-2.6,0s-0.8,2,0.2,2.8v-0.2l4.3,4.6H-41c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h39.3l-4.8,4.9c-0.8,0.8-0.8,2.1,0,2.9
      c0.8,0.8,2,0.8,2.8,0l8.2-8.1c0.4-0.4,0.6-0.9,0.6-1.4C5.1,60.8,4.9,60.3,4.5,59.9z" data-spirit-id="arrow" style=""></path>
  </g>

</g>

<g id="strokes" data-spirit-id="strokes">
  <line fill="none" stroke="#f2f2f2" stroke-miterlimit="10" x1="7.5" y1="43" x2="7.5" y2="89"></line>
  <line fill="none" stroke="#f2f2f2" stroke-width="3" stroke-miterlimit="10" x1="16.5" y1="43" x2="16.5" y2="89"></line>
  <line fill="none" stroke="#f2f2f2" stroke-miterlimit="10" x1="171.5" y1="43" x2="171.5" y2="89"></line>
  <line fill="none" stroke="#f2f2f2" stroke-width="3" stroke-miterlimit="10" x1="180.5" y1="43" x2="180.5" y2="89"></line>
</g>
<g id="file-strokes" data-spirit-id="file-strokes" style="">
  <line fill="none" stroke="#1d2a45" stroke-miterlimit="10" x1="100.5" y1="40" x2="100.5" y2="86"></line>
  <line fill="none" stroke="#1d2a45" stroke-width="3" stroke-miterlimit="10" x1="109.5" y1="40" x2="109.5" y2="86"></line>
</g>
</svg>
  </div>

  <div class="animation">
    <svg viewBox="0 0 171 113">
<path id="star-c" fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M47.7-0.3H46c-0.9,0-1.7-0.8-1.7-1.7v-1.7
  c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6V-2c0,0.9-0.8,1.7-1.7,1.7h-1.7c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7
  h1.8c0.9,0,1.7,0.8,1.7,1.7v1.7c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6V4.6c0-0.9,0.8-1.7,1.7-1.7h1.8
  c0.9,0,1.7-0.8,1.6-1.7C49.3,0.3,48.6-0.3,47.7-0.3" data-spirit-id="star-c" style=""></path>
  <path id="star-d" fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M47.7-0.3H46c-0.9,0-1.7-0.8-1.7-1.7v-1.7
  c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6V-2c0,0.9-0.8,1.7-1.7,1.7h-1.7c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7
  h1.8c0.9,0,1.7,0.8,1.7,1.7v1.7c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6V4.6c0-0.9,0.8-1.7,1.7-1.7h1.8
  c0.9,0,1.7-0.8,1.6-1.7C49.3,0.3,48.6-0.3,47.7-0.3" data-spirit-id="star-d" style=""></path>
<path id="star-b" fill-rule="evenodd" clip-rule="evenodd" fill="#9D9FA2" d="M67.6-0.7h-1.7c-0.9,0-1.7-0.8-1.7-1.7v-1.7
  c0-0.8-0.6-1.6-1.4-1.7C61.8-5.9,61-5.1,61-4.2v1.8c0,0.9-0.8,1.7-1.7,1.7h-1.7c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7
  h1.8c0.9,0,1.7,0.8,1.7,1.7v1.7c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6V4.2c0-0.9,0.8-1.7,1.7-1.7h1.8
  c0.9,0,1.7-0.8,1.6-1.7C69.2-0.1,68.5-0.7,67.6-0.7" data-spirit-id="star-b" style=""></path>
<path id="star-a" fill-rule="evenodd" clip-rule="evenodd" fill="#4AA3EB" d="M85.1-0.7h-1.7c-0.9,0-1.7-0.8-1.7-1.7v-1.7
  c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6v1.8c0,0.9-0.8,1.7-1.7,1.7h-1.7c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7
  h1.8c0.9,0,1.7,0.8,1.7,1.7v1.7c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6V4.2c0-0.9,0.8-1.7,1.7-1.7h1.8
  c0.9,0,1.7-0.8,1.6-1.7C86.7-0.1,86-0.7,85.1-0.7" data-spirit-id="star-a" style=""></path>
<line id="stroke-b" fill="none" stroke="#4AA3EB" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="6" y1="47.5" x2="61" y2="47.5" data-spirit-id="stroke-b" style=""></line>
<line id="stroke-a" fill="none" stroke="#4AA3EB" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="6" y1="37.5" x2="74" y2="37.5" data-spirit-id="stroke-a" style=""></line>
<path id="circle-b" fill-rule="evenodd" clip-rule="evenodd" fill="#4AA3EB" d="M127.6,11.3c0,2.1-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7
  c0-2.1,1.7-3.7,3.7-3.7S127.6,9.2,127.6,11.3" data-spirit-id="circle-b" style=""></path>
<path id="circle-a" fill-rule="evenodd" clip-rule="evenodd" fill="#9329D1" d="M117.9,11.5c0,2.1-1.7,3.7-3.7,3.7
  c-2.1,0-3.7-1.7-3.7-3.7s1.7-3.7,3.7-3.7C116.2,7.8,117.9,9.4,117.9,11.5" data-spirit-id="circle-a" style=""></path>
<path id="donut-b" fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M21.2,59.6L21.2,59.6c-4.4,0-7.9,3.6-7.9,7.9
  c0,4.4,3.6,7.9,7.9,7.9c4.4,0,7.9-3.6,7.9-7.9C29.2,63.1,25.6,59.6,21.2,59.6 M21.2,71.5c-1.1,0-2.1-0.4-2.8-1.2
  c-0.7-0.7-1.2-1.7-1.2-2.8c0-1.1,0.4-2.1,1.2-2.8c0.7-0.7,1.7-1.2,2.8-1.2c1.1,0,2.1,0.4,2.8,1.2c0.7,0.7,1.2,1.7,1.2,2.8
  c0,1.1-0.4,2.1-1.2,2.8C23.3,71,22.3,71.5,21.2,71.5" data-spirit-id="donut-b" style=""></path>
<path id="donut-a" fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M21.2,83.8L21.2,83.8c-4.4,0-7.9,3.6-7.9,7.9
  c0,4.4,3.6,7.9,7.9,7.9c4.4,0,7.9-3.6,7.9-7.9C29.2,87.4,25.6,83.8,21.2,83.8 M21.2,95.7c-1.1,0-2.1-0.4-2.8-1.2
  c-0.7-0.7-1.2-1.7-1.2-2.8c0-1.1,0.4-2.1,1.2-2.8c0.7-0.7,1.7-1.2,2.8-1.2c1.1,0,2.1,0.4,2.8,1.2c0.7,0.7,1.2,1.7,1.2,2.8
  c0,1.1-0.4,2.1-1.2,2.8C23.3,95.3,22.3,95.7,21.2,95.7" data-spirit-id="donut-a" style=""></path>
<g id="ghost" data-spirit-id="ghost" style="">
  <path fill="#f2f2f2" stroke="#1D2945" stroke-width="4" stroke-miterlimit="10" d="M58.8,41.6c0-14.3,11.6-26,26-26s26,11.6,26,26
    v2.6c0,29.3-23.8,53.1-53.1,53.1H45.3c-3.3,0-5.9-2.7-5.9-5.9s2.7-5.9,5.9-5.9c3.3,0,5.9-2.7,5.9-5.9c0-3.3-2.7-5.9-5.9-5.9
    c-3.3,0-5.9-2.7-5.9-5.9c0-3.3,2.7-5.9,5.9-5.9c1.7,0,7.5,0,7.5,0c3.3,0,5.9-2.7,5.9-5.9V41.6"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M85.5,35.9c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2
    c-2.3,0-4.2-1.9-4.2-4.2C81.3,37.7,83.2,35.9,85.5,35.9"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M97.8,35.9c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2
    c-2.3,0-4.2-1.9-4.2-4.2C93.6,37.7,95.5,35.9,97.8,35.9"></path>
</g>
</svg>
  </div>

  <div class="animation">
    <svg viewBox="0 0 166 134">
<path id="star-grey" fill-rule="evenodd" clip-rule="evenodd" fill="#9D9FA2" d="M 142 85.8 h -1.7 c -0.9 0 -1.7 -0.8 -1.7 -1.7 v -1.7 c 0 -0.8 -0.6 -1.6 -1.4 -1.7 c -0.9 -0.1 -1.7 0.7 -1.7 1.6 V 84 c 0 0.9 -0.8 1.7 -1.7 1.7 H 132 c -0.8 0 -1.6 0.6 -1.7 1.4 c -0.1 0.9 0.7 1.7 1.6 1.7 h 1.8 c 0.9 0 1.7 0.8 1.7 1.7 v 1.7 c 0 0.8 0.6 1.6 1.4 1.7 c 0.9 0.1 1.7 -0.7 1.7 -1.6 v -1.8 c 0 -0.9 0.8 -1.7 1.7 -1.7 h 1.8 c 0.9 0 1.7 -0.8 1.6 -1.7 C 143.6 86.4 142.9 85.8 142 85.8" data-spirit-id="star-grey" data-original="M142,85.8h-1.7c-0.9,0-1.7-0.8-1.7-1.7v-1.7
  c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6V84c0,0.9-0.8,1.7-1.7,1.7H132c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7
  h1.8c0.9,0,1.7,0.8,1.7,1.7v1.7c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6v-1.8c0-0.9,0.8-1.7,1.7-1.7h1.8
  c0.9,0,1.7-0.8,1.6-1.7C143.6,86.4,142.9,85.8,142,85.8" style=""></path>
<path id="star-blue" fill-rule="evenodd" clip-rule="evenodd" fill="#4AA3EB" d="M44.1,17.4h0.3c-0.9,0-1.7-0.8-1.7-1.7V16 	c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6v-0.2c0,0.9-0.8,1.7-1.7,1.7H38c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7 	h-0.2c0.9,0,1.7,0.8,1.7,1.7V22c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6v0.2c0-0.9,0.8-1.7,1.7-1.7h-0.2 	c0.9,0,1.7-0.8,1.6-1.7C45.7,18,44.9,17.4,44.1,17.4" data-spirit-id="star-blue" data-original="M46.1,17.4h-1.7c-0.9,0-1.7-0.8-1.7-1.7V14
  c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6v1.8c0,0.9-0.8,1.7-1.7,1.7H36c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7
  h1.8c0.9,0,1.7,0.8,1.7,1.7V24c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6v-1.8c0-0.9,0.8-1.7,1.7-1.7h1.8
  c0.9,0,1.7-0.8,1.6-1.7C47.7,18,46.9,17.4,46.1,17.4" style=""></path>
<path id="circle" fill-rule="evenodd" clip-rule="evenodd" fill="#9329D1" d="M31.2,68c0,2.1-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7
  c0-2.1,1.7-3.7,3.7-3.7S31.2,65.9,31.2,68" data-spirit-id="circle" style=""></path>
<path id="shadow" fill-rule="evenodd" clip-rule="evenodd" fill="#D6D7DA" d="M101.6,116.4H63.7c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4
  h37.9c2.2,0,4-1.8,4-4C105.6,118.2,103.8,116.4,101.6,116.4" data-spirit-id="shadow" style=""></path>
<g id="ghost" data-spirit-id="ghost" style="">
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M100.1,81.3c-0.3,0-0.7-0.1-1-0.3c-0.9-0.6-1.3-1.8-0.7-2.7
    c0.3-0.5,7-11.5,19.8-11.5c1,0,1.9-0.9,1.9-1.9s-0.8-1.9-1.9-1.9H98.8c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2h19.4
    c3.2,0,5.9,2.6,5.9,5.9c0,3.2-2.6,5.9-5.9,5.9c-10.5,0-16.3,9.5-16.4,9.6C101.5,80.9,100.8,81.3,100.1,81.3"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#f2f2f2" stroke="#1D2945" stroke-width="4" stroke-miterlimit="10" d="
    M88.9,99.3c0,3-2.4,5.4-5.4,5.4c-3,0-5.4-2.4-5.4-5.4c0-3-2.4-5.4-5.4-5.4c-3,0-5.4,2.4-5.4,5.4c0,3-2.4,5.4-5.4,5.4
    c-3,0-5.4-2.4-5.4-5.4c0-23.5-8-19.2-8-50c0-14.3,11.6-26,26-26c14.3,0,26,11.6,26,26c0,29.6,10.1,26,10.1,50c0,3-2.4,5.4-5.4,5.4
    c-3,0-5.4-2.4-5.4-5.4c0-3-2.4-5.4-5.4-5.4C91.4,93.9,88.9,96.3,88.9,99.3"></path>
  <path id="arm" fill-rule="evenodd" clip-rule="evenodd" fill="#BBBEC7" d="M76.1,62c-1.1,0-2,0.9-2,2v19.4c0,1-0.8,1.9-1.9,1.9
    c-1,0-1.9-0.9-1.9-1.9c0-9.5-6.1-15.7-9.4-18.3c-1.1-0.9-2-1.4-2.1-1.5c-0.3-0.2-0.7-0.3-1-0.3c-0.7,0-1.3,0.3-1.7,1
    c-0.6,0.9-0.3,2.2,0.7,2.7c0.1,0.1,9.6,5.8,9.6,16.4c0,3.3,2.6,5.9,5.9,5.9c3.2,0,5.9-2.6,5.9-5.9V64C78.1,62.9,77.2,62,76.1,62" data-spirit-id="arm" style=""></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M86.8,37.6c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2
    c-2.3,0-4.2-1.9-4.2-4.2C82.7,39.5,84.5,37.6,86.8,37.6"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M72.1,37.6c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2
    c-2.3,0-4.2-1.9-4.2-4.2C68,39.5,69.8,37.6,72.1,37.6"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#f2f2f2" d="M115,55.2v16.8c0,1.6,3.4,2.8,7.7,2.8c4.2,0,7.7-1.3,7.7-2.8V55.2
    H115"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#9329D1" d="M117,71.7c0.6,0.5,2.6,1.2,5.7,1.2s5.1-0.7,5.7-1.2V57.2H117V71.7
    z M122.6,76.9c-4.8,0-9.7-1.5-9.7-4.8V55.2c0-1.1,0.9-2,2-2h15.3c1.1,0,2,0.9,2,2v16.8C132.3,75.4,127.4,76.9,122.6,76.9z"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#9329D1" d="M117.6,54.2c0.9,0.4,2.7,0.8,5.1,0.8s4.1-0.4,5.1-0.8
    c-0.9-0.4-2.7-0.8-5.1-0.8S118.5,53.8,117.6,54.2z M122.6,59c-4.8,0-9.7-1.5-9.7-4.8c0-3.3,4.9-4.8,9.7-4.8c4.8,0,9.7,1.5,9.7,4.8
    C132.3,57.6,127.4,59,122.6,59z"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#9329D1" d="M113,61.7c-0.7,0.4-1.3,1.1-1.3,2s0.5,1.6,1.3,2V61.7z M114,70
    c-3.4,0-6.3-2.8-6.3-6.3s2.8-6.3,6.3-6.3c0.5,0,1,0.1,1.5,0.2c0.9,0.2,1.5,1,1.5,1.9v8.2c0,0.9-0.6,1.7-1.5,1.9
    C114.9,69.9,114.4,70,114,70z"></path>

  <line id="vapor-2" data-spirit-id="vapor-2" fill="none" stroke="#9329D1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="127" y1="53" x2="127" y2="29" style=""></line>
  <line id="vapor-1" data-spirit-id="vapor-1" fill="none" stroke="#9329D1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="119" y1="53" x2="119" y2="29" style=""></line>
</g>
</svg>
  </div>

  <div class="animation">
    <svg viewBox="0 0 164 122">
<path id="ball" fill-rule="evenodd" clip-rule="evenodd" fill="#9329D1" d="M126.6,86c0,2.1-1.7,3.7-3.7,3.7c-2.1,0-3.7-1.7-3.7-3.7
  s1.7-3.7,3.7-3.7C125,82.3,126.6,83.9,126.6,86" data-spirit-id="ball" style=""></path>
<path id="star" fill-rule="evenodd" clip-rule="evenodd" fill="#4AA3EB" d="M52.9,13.6h-1.7c-0.9,0-1.7-0.8-1.7-1.7v-1.7   c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6v1.8c0,0.9-0.8,1.7-1.7,1.7h-1.7c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7   h1.8c0.9,0,1.7,0.8,1.7,1.7v1.7c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6v-1.8c0-0.9,0.8-1.7,1.7-1.7H53   c0.9,0,1.7-0.8,1.6-1.7C54.5,14.2,53.7,13.6,52.9,13.6" data-spirit-id="star" data-original="M52.9,13.6h-1.7c-0.9,0-1.7-0.8-1.7-1.7v-1.7
  c0-0.8-0.6-1.6-1.4-1.7c-0.9-0.1-1.7,0.7-1.7,1.6v1.8c0,0.9-0.8,1.7-1.7,1.7h-1.7c-0.8,0-1.6,0.6-1.7,1.4c-0.1,0.9,0.7,1.7,1.6,1.7
  h1.8c0.9,0,1.7,0.8,1.7,1.7v1.7c0,0.8,0.6,1.6,1.4,1.7c0.9,0.1,1.7-0.7,1.7-1.6v-1.8c0-0.9,0.8-1.7,1.7-1.7H53
  c0.9,0,1.7-0.8,1.6-1.7C54.5,14.2,53.7,13.6,52.9,13.6" style=""></path>
<path id="shadow" fill-rule="evenodd" clip-rule="evenodd" fill="#D6D7DA" d="M101.5,109.6H63.6c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4
  h37.9c2.2,0,4-1.8,4-4C105.5,111.4,103.7,109.6,101.5,109.6" data-spirit-id="shadow" style=""></path>

<g id="eyes" data-spirit-id="eyes" style="">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M89.4,33.8c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2
      s-4.2-1.9-4.2-4.2C85.3,35.6,87.1,33.8,89.4,33.8"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M76.2,40.4h-3.5c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2h3.5
      c1.1,0,2,0.9,2,2C78.2,39.5,77.4,40.4,76.2,40.4"></path>
  </g>
  <rect x="54.6" y="80.5" fill-rule="evenodd" clip-rule="evenodd" fill="#f2f2f2" width="53.2" height="14.8"></rect>
<g id="ghost" data-spirit-id="ghost" style="">
  <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#1D2945" stroke-width="4" stroke-miterlimit="10" d="
    M86.5,92.4c0,2.9-2.3,5.2-5.2,5.2c-2.9,0-5.2-2.3-5.2-5.2c0-2.9-2.3-5.2-5.2-5.2c-2.9,0-5.2,2.3-5.2,5.2c0,2.9-2.3,5.2-5.2,5.2
    c-2.9,0-5.2-2.3-5.2-5.2c0-22.6-0.1-14.9-0.1-47c0-14.3,11.6-26,26-26s26,11.6,26,26c0,29.6,0,23.9,0,47c0,2.9-2.3,5.2-5.2,5.2
    c-2.9,0-5.2-2.3-5.2-5.2c0-2.9-2.3-5.2-5.2-5.2S86.5,89.6,86.5,92.4"></path>
  <g id="book" data-spirit-id="book" style="">
    <polyline fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" points="81.3,83.9 113.4,75.4 113.4,42.8 81.3,51.3 81.3,83.9
          "></polyline>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#1DCB8B" d="M83.3,52.8v28.5l28.1-7.4V45.4L83.3,52.8z M81.3,85.9
      c-0.4,0-0.9-0.1-1.2-0.4c-0.5-0.4-0.8-1-0.8-1.6V51.3c0-0.9,0.6-1.7,1.5-1.9l32.1-8.5c0.6-0.2,1.2,0,1.7,0.3
      c0.5,0.4,0.8,1,0.8,1.6v32.6c0,0.9-0.6,1.7-1.5,1.9l-32.1,8.5C81.6,85.9,81.5,85.9,81.3,85.9z"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#f2f2f2" d="M117.4,55.7c-6.1,0-5.2,7.7,0,7.7c6.9,0,7.6-8.3,0-11.2V55.7"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M117.4,57.7c-0.8,0-1.5,0.2-1.9,0.6c-0.3,0.3-0.4,0.8-0.4,1
      c0,0.8,0.6,2.1,2.3,2.1c1.9,0,3.1-0.8,3.4-2.2c0.2-1-0.2-2.3-1.4-3.5v2H117.4z M117.4,65.4c-3.9,0-6.3-3.1-6.3-6.1
      c0-1.5,0.6-2.9,1.6-3.9c0.5-0.5,1.4-1.1,2.6-1.4v-4.6l2.7,1c5.4,2,7.2,6.4,6.6,9.6C124.1,63.2,121.2,65.4,117.4,65.4z"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#13AA6D" d="M51.2,73.9l28.1,7.4V52.8l-28.1-7.4V73.9z M81.3,85.9
      c-0.2,0-0.3,0-0.5-0.1l-32.1-8.5c-0.9-0.2-1.5-1-1.5-1.9V42.8c0-0.6,0.3-1.2,0.8-1.6c0.5-0.4,1.1-0.5,1.7-0.3l32.1,8.5
      c0.9,0.2,1.5,1,1.5,1.9v32.6c0,0.6-0.3,1.2-0.8,1.6C82.1,85.8,81.7,85.9,81.3,85.9z"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#f2f2f2" d="M45.6,55.7c6.1,0,5.2,7.7,0,7.7c-6.9,0-7.6-8.3,0-11.2V55.7"></path>
    <polyline fill-rule="evenodd" clip-rule="evenodd" fill="#13AA6D" points="81.3,83.9 49.2,75.4 49.2,42.8 81.3,51.3 81.3,83.9
      "></polyline>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#1D2945" d="M43.6,55.7c-1.2,1.1-1.6,2.4-1.4,3.5c0.2,1.4,1.5,2.2,3.4,2.2
      c1.7,0,2.3-1.2,2.3-2.1c0-0.3-0.1-0.7-0.4-1c-0.4-0.4-1-0.6-1.9-0.6h-2V55.7z M45.6,65.4c-3.8,0-6.7-2.2-7.3-5.5
      c-0.6-3.2,1.2-7.5,6.6-9.6l2.7-1v4.6c1.2,0.3,2.1,0.9,2.6,1.4c1.1,1,1.6,2.4,1.6,3.9C51.8,62.3,49.5,65.4,45.6,65.4z"></path>
  </g>
</g>
</svg>
  </div>
</div>

body {
  height: 100vh;
  background: #f1f1f1;
}

.animations {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animation {
  flex: 1;
  max-width: 200px;
  
  svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

.controls {
  position: absolute;
  top: 10vh;
  left: 50%;
}

const url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/groups-spiritappio.json'
const onUpdate = () => { range.value = masterTimeline.time() }

let masterTimeline

range.oninput = function() {
  masterTimeline.pause().seek(this.value)
}

spirit.setup().then(() => {
  masterTimeline = new spirit.config.gsap.timeline({ paused: true, onUpdate })
  
  spirit.load(url).then(groups => {
    
    // groups.construct() returns an array of gsap timelines
    groups.construct().forEach(tl => {
      masterTimeline.add(tl.play(0), 0)
    })
    
    // update slider bound
    range.min = 0
    range.max = masterTimeline.duration()
    
    // start master timeline
    play()
  })
})

function play() {
  masterTimeline.repeat(-1).play()
}

function stop() {
  masterTimeline.stop()
}