<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 560">  
  <g id="spark">
    <line class="stroke" x1="557.01" y1="466.57" x2="557.01" y2="469.57"/>
    <line class="stroke" x1="557.01" y1="455.57" x2="557.01" y2="458.57"/>
    <line class="stroke" x1="559.84" y1="465.4" x2="561.96" y2="467.52"/>
    <line class="stroke" x1="552.06" y1="457.62" x2="554.18" y2="459.75"/>
    <line class="stroke" x1="554.18" y1="465.4" x2="552.06" y2="467.52"/>
    <line class="stroke" x1="561.96" y1="457.62" x2="559.84" y2="459.75"/>
    <line class="stroke" x1="553.01" y1="462.57" x2="550.01" y2="462.57"/>
    <line class="stroke" x1="564.01" y1="462.57" x2="561.01" y2="462.57"/>
  </g>
  
  <g id="monster">
    <rect class="fill" x="102.01" y="472.54" width="120" height="20"/>
    <rect class="fill" x="127.01" y="412.54" width="30" height="25"/>
    <line class="stroke" x1="137.01" y1="432.54" x2="125.01" y2="432.54"/>
    <line class="stroke" x1="137.01" y1="427.54" x2="125.01" y2="427.54"/>
    <rect class="fill" x="167.01" y="412.54" width="30" height="25"/>
    <line class="stroke" x1="187.01" y1="432.54" x2="199.01" y2="432.54"/>
    <line class="stroke" x1="187.01" y1="427.54" x2="199.01" y2="427.54"/>
    <rect class="fill" x="167.01" y="437.54" width="30" height="35"/>
    <line class="stroke" x1="167.01" y1="442.54" x2="197.01" y2="442.54"/>
    <path class="fill" d="M167,457.54v15h40v-10a5,5,0,0,0-5-5H177"/>
    <line class="stroke" x1="167.01" y1="467.54" x2="207.01" y2="467.54"/>
    <line class="stroke" x1="189.01" y1="448.54" x2="199.01" y2="448.54"/>
    <line class="stroke" x1="189.01" y1="452.54" x2="199.01" y2="452.54"/>
    <polygon class="fill" points="167.01 422.54 172.01 417.54 177.01 422.54 182.01 417.54 187.01 422.54 192.01 417.54 197.01 422.54 197.01 342.54 167.01 342.54 167.01 422.54"/>
    <polygon class="fill" points="157.01 422.54 152.01 417.54 147.01 422.54 142.01 417.54 137.01 422.54 132.01 417.54 127.01 422.54 127.01 342.54 157.01 342.54 157.01 422.54"/>
    <rect class="fill" x="157.01" y="342.54" width="10" height="30"/>
    <line class="stroke" x1="177.01" y1="372.54" x2="147.01" y2="372.54"/>
    <rect class="fill" x="127.01" y="437.54" width="30" height="35"/>
    <line class="stroke" x1="157.01" y1="442.54" x2="127.01" y2="442.54"/>
    <path class="fill" d="M157,457.54v15H117v-10a5,5,0,0,1,5-5h25"/>
    <line class="stroke" x1="157.01" y1="467.54" x2="117.01" y2="467.54"/>
    <line class="stroke" x1="135.01" y1="448.54" x2="125.01" y2="448.54"/>
    <line class="stroke" x1="135.01" y1="452.54" x2="125.01" y2="452.54"/>
    <path class="stroke" d="M182,265.54a26.21,26.21,0,0,1-20,9.63,24.83,24.83,0,0,1-19.45-9.05"/>
    <line class="stroke" x1="182.01" y1="334.54" x2="142.01" y2="334.54"/>
    <path class="fill" d="M118,379.54v8h6v-8a7,7,0,0,0-7-7h0v-35H102v59h16Z"/>
    <polyline class="fill" points="112.01 399.54 106.01 399.54 106.01 382.54"/>
    <path class="fill" d="M116,389.54v10a3,3,0,0,1-3,3h-3v-20"/>
    <path class="fill" d="M120,387.54v9a3,3,0,0,1-3,3h-3v-17"/>
    <path class="fill" d="M118,379.54v5a3,3,0,0,0,3,3h3v-8"/>
    <line class="stroke" x1="110.01" y1="348.54" x2="100.01" y2="348.54"/>
    <line class="stroke" x1="110.01" y1="353.54" x2="100.01" y2="353.54"/>
    <line class="stroke" x1="110.01" y1="358.54" x2="100.01" y2="358.54"/>
    <line class="stroke" x1="110.01" y1="363.54" x2="100.01" y2="363.54"/>
    <path class="fill" d="M117,342.54l-3.5-4-4,4-4-4-3.5,4v-65a15,15,0,0,1,15-15h0Z"/>
    <path class="fill" d="M206,379.54v8h-6v-8a7,7,0,0,1,7-7h0v-35h15v59H206Z"/>
    <polyline class="fill" points="212.01 399.54 218.01 399.54 218.01 382.54"/>
    <path class="fill" d="M208,389.54v10a3,3,0,0,0,3,3h3v-20"/>
    <path class="fill" d="M204,387.54v9a3,3,0,0,0,3,3h3v-17"/>
    <path class="fill" d="M206,379.54v5a3,3,0,0,1-3,3h-3v-8"/>
    <line class="stroke" x1="214.01" y1="348.54" x2="224.01" y2="348.54"/>
    <line class="stroke" x1="214.01" y1="353.54" x2="224.01" y2="353.54"/>
    <line class="stroke" x1="214.01" y1="358.54" x2="224.01" y2="358.54"/>
    <line class="stroke" x1="214.01" y1="363.54" x2="224.01" y2="363.54"/>
    <path class="fill" d="M207,342.54l3.5-4,4,4,4-4,3.5,4v-65a15,15,0,0,0-15-15h0Z"/>
    <path class="fill" d="M127,362.54H117v-100l25-15v100A15,15,0,0,1,127,362.54Z"/>
    <polygon class="stroke" points="142.01 314.28 125.01 277.54 134.01 274.54 125.01 267.54 142.01 247.54 142.01 314.28"/>
    <line class="stroke" x1="142.01" y1="253.87" x2="128.65" y2="270.35"/>
    <line class="stroke" x1="142.01" y1="303.93" x2="129.61" y2="276.01"/>
    <path class="stroke" d="M117,331.59h15v15a5,5,0,0,1-5,5H117"/>
    <line class="stroke" x1="117.01" y1="336.59" x2="132.01" y2="336.59"/>
    <path class="fill" d="M197,362.54h10v-100l-25-15v100A15,15,0,0,0,197,362.54Z"/>
    <polygon class="stroke" points="182.01 314.28 199.01 277.54 190.01 274.54 199.01 267.54 182.01 247.54 182.01 314.28"/>
    <line class="stroke" x1="182.01" y1="253.87" x2="195.39" y2="270.36"/>
    <line class="stroke" x1="182.01" y1="303.93" x2="194.41" y2="276.01"/>
    <path class="stroke" d="M207,331.59H192v15a5,5,0,0,0,5,5h10"/>
    <line class="stroke" x1="207.01" y1="336.59" x2="192.01" y2="336.59"/>
    <path class="fill" d="M162,267.54h0a20,20,0,0,1-20-20v-10h40v10A20,20,0,0,1,162,267.54Z"/>
    <line class="stroke" x1="162.01" y1="247.54" x2="162.01" y2="262.54"/>
    <rect class="fill" x="135.01" y="237.54" width="7" height="4"/>
    <rect class="fill" x="182.01" y="237.54" width="7" height="4"/>
    
    <g id="head">
      <path class="fill" d="M139,222.54h0a3,3,0,0,1-3-3v-7a3,3,0,0,1,3-3h3v10A3,3,0,0,1,139,222.54Z"/>
      <path class="fill" d="M185,222.54h0a3,3,0,0,0,3-3v-7a3,3,0,0,0-3-3h-3v10A3,3,0,0,0,185,222.54Z"/>
      <path class="fill" d="M177,242.54H147a5,5,0,0,1-5-5v-55h40v55A5,5,0,0,1,177,242.54Z"/>
      <path class="fill" d="M182,209.54H142a7,7,0,0,1,7-7h26a7,7,0,0,1,7,7Z"/>
      <line class="stroke" x1="150.01" y1="242.54" x2="142.01" y2="209.54"/>
      <line class="stroke" x1="182.01" y1="209.54" x2="174.01" y2="242.54"/>
      <line class="stroke" x1="154.01" y1="197.54" x2="170.01" y2="197.54"/>
      <line class="stroke" x1="154.01" y1="230.54" x2="170.01" y2="230.54"/>
      <line class="stroke" x1="160.01" y1="234.54" x2="164.01" y2="234.54"/>
      <line class="stroke" x1="166.01" y1="193.54" x2="158.01" y2="193.54"/>
      <line class="stroke" x1="162.01" y1="186.54" x2="162.01" y2="182.54"/>
      <line class="stroke" x1="170.6" y1="212.96" x2="173.43" y2="210.13"/>
      <line class="stroke" x1="173.43" y1="212.96" x2="170.6" y2="210.13"/>
      <line class="stroke" x1="166.01" y1="186.54" x2="166.01" y2="185.54"/>
      <line class="stroke" x1="170.01" y1="186.54" x2="170.01" y2="182.54"/>
      <polyline class="stroke" points="174.01 182.54 174.01 190.54 178.01 190.54 178.01 193.54"/>
      <line class="stroke" x1="178.01" y1="186.54" x2="178.01" y2="182.54"/>
      <line class="stroke" x1="158.01" y1="186.54" x2="158.01" y2="182.54"/>
      <line class="stroke" x1="154.01" y1="189.54" x2="154.01" y2="182.54"/>
      <line class="stroke" x1="150.01" y1="186.54" x2="150.01" y2="182.54"/>
      <line class="stroke" x1="146.01" y1="186.54" x2="146.01" y2="182.54"/>
      <path id="_Path_" data-name="&lt;Path&gt;" class="stroke" d="M142,192.27a2,2,0,0,1,2,2h0a2,2,0,0,1-2,2"/>
      <path id="_Path_2" data-name="&lt;Path&gt;" class="stroke" d="M154,220.27a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2"/>
      <path id="_Path_3" data-name="&lt;Path&gt;" class="stroke" d="M166,220.27a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2"/>
      <rect class="stroke" x="158.01" y="209.54" width="8" height="14"/>
      <rect id="_Path_4" data-name="&lt;Path&gt;" class="fill" x="150.01" y="209.54" width="4" height="4" rx="2" ry="2"/>
      <path id="mouth" class="stroke" d="M154,227.54h16s2.51,8-8,8S154,227.54,154,227.54Z"/>
    </g>
  </g>
  
  <path id="wire" class="stroke" d="M222,482.54H501a5,5,0,0,0,5-5v-10a5,5,0,0,0-5-5H381a5,5,0,0,1-5-5v-10a5,5,0,0,1,5-5H501a5,5,0,0,0,5-5v-10a5,5,0,0,0-5-5H381a5,5,0,0,1-5-5v-10a5,5,0,0,1,5-5H501a5,5,0,0,0,5-5v-10a5,5,0,0,0-5-5H381a5,5,0,0,1-5-5v-265a5,5,0,0,1,5-5h10a5,5,0,0,1,5,5v30a5,5,0,0,0,5,5h25a5,5,0,0,1,5,5v80a5,5,0,0,1-5,5H401a5,5,0,0,0-5,5v75a5,5,0,0,0,5,5h80a5,5,0,0,1,5,5v10a5,5,0,0,1-5,5H401a5,5,0,0,0-5,5v10a5,5,0,0,0,5,5H521a5,5,0,0,1,5,5v90a5,5,0,0,0,5,5h26"/>
  
  <g id="electrical-box"><rect class="fill" x="361.01" y="167.54" width="50" height="50"/>
    <rect class="fill" x="366.01" y="185.54" width="4" height="13.91"/>
    <rect class="fill" x="370.01" y="176.54" width="32" height="31.91" rx="5" ry="5"/>
    <rect class="fill" x="365.01" y="171.54" width="4" height="4" rx="2" ry="2"/>
    <rect class="fill" x="403.01" y="171.54" width="4" height="4" rx="2" ry="2"/>
    <rect class="fill" x="403.01" y="209.54" width="4" height="4" rx="2" ry="2"/>
    <rect class="fill" x="365.01" y="209.54" width="4" height="4" rx="2" ry="2"/>
    <rect class="fill" x="370.01" y="176.54" width="32" height="32" rx="5" ry="5"/>
    <polygon class="fill" points="380.99 201.45 384.89 192.54 380.99 190.02 383.59 183.54 391.39 183.54 387.49 190.02 390.09 192.54 380.99 201.45"/>
  </g>
  
  <g id="power-toggle">
    <rect id="back-board" class="fill" x="546.9" y="350.07" width="20" height="150" rx="2" ry="2" transform="translate(1113.81 850.15) rotate(-180)"/>
    
    <g id="lever">
      <path class="fill" d="M583.06,355.19l-10-.21-1.2,73a2,2,0,0,0,2,2l6,.12a2,2,0,0,0,2-2Z"/>
      <rect class="fill" x="575.82" y="340.59" width="5" height="4" transform="translate(223.82 913.68) rotate(-88.81)"/>
      <rect class="fill" x="575.92" y="333.59" width="5" height="8" rx="2.5" ry="2.5" transform="translate(228.92 908.89) rotate(-88.81)"/>
      <path class="fill" d="M578.89,315.09h0a3.5,3.5,0,0,0-3.55,3.89L576.48,335l4,.08,1.8-16A3.5,3.5,0,0,0,578.89,315.09Z"/>
      <path class="fill" d="M578.16,345.09h0a7,7,0,0,1,7,7v1a2,2,0,0,1-2,2h-10a2,2,0,0,1-2-2v-1a7,7,0,0,1,7-7Z" transform="translate(7.38 -11.91) rotate(1.19)"/>
    </g>
    
    <g id="hardware">
      <path class="fill" d="M566.92,470.07h8a2,2,0,0,0,2-2v-11a2,2,0,0,0-2-2h-8Z"/>
      <path class="fill" d="M566.92,395.07h8a2,2,0,0,0,2-2v-11a2,2,0,0,0-2-2h-8Z"/>
      <path class="fill" d="M566.92,430.07h16a2,2,0,0,0,2-2v-6a2,2,0,0,0-2-2h-16Z"/>
      <rect class="fill" x="574.92" y="423.07" width="4" height="4" rx="2" ry="2"/>
    </g>
  </g>
  
  <g id="base-ball">
    <rect class="fill" x="403.51" y="39.93" width="25" height="25" rx="12.5" ry="12.5"/><path class="stroke" d="M424.76,61.26a12.5,12.5,0,0,1,0-17.68h0"/><path class="stroke" d="M407.17,61.26a12.5,12.5,0,0,0,0-17.68h0"/>
  </g>
  
  <g id="ramps">
    <path class="fill" d="M423.51,119.81h120a0,0,0,0,1,0,0v7a10,10,0,0,1-10,10h-100a10,10,0,0,1-10-10v-7a0,0,0,0,1,0,0Z" transform="translate(73.04 -157.63) rotate(20)"/>
    <path class="fill" d="M423.51,279.81h120a0,0,0,0,1,0,0v7a10,10,0,0,1-10,10h-100a10,10,0,0,1-10-10v-7a0,0,0,0,1,0,0Z" transform="translate(127.77 -147.98) rotate(20)"/>
    <path class="fill" d="M493.51,199.81h100a10,10,0,0,1,10,10v7a0,0,0,0,1,0,0h-120a0,0,0,0,1,0,0v-7A10,10,0,0,1,493.51,199.81Z" transform="translate(1125.49 218.16) rotate(160)"/>
  </g>
  
  <g id="teeter-totter">
    <rect class="fill" x="336.01" y="64.93" width="100" height="10" transform="translate(61.81 -150.96) rotate(24)"/>
    <rect class="fill" x="384.01" y="67.93" width="4" height="4" rx="2" ry="2"/>
  </g>
  
  <line id="rope-02-c" class="stroke" x1="344.28" y1="56.82" x2="344.28" y2="452.93"/>
  <line id="rope-02-b" class="stroke" x1="344.28" y1="452.93" x2="284.27" y2="452.93"/>
  <line id="rope-02-a" class="stroke" x1="284.27" y1="452.93" x2="284.28" y2="397.93"/>
  
  <rect id="pulley-3" class="fill" x="279.28" y="447.93" width="10" height="10" rx="5" ry="5"/>
  <rect id="pulley-4" class="fill" x="339.28" y="447.93" width="10" height="10" rx="5" ry="5"/>
  
  <g id="pop">
    <line class="stroke" x1="293.26" y1="353.84" x2="298.13" y2="365.9"/>
    <line class="stroke" x1="270.41" y1="297.28" x2="275.28" y2="309.34"/>
    <line class="stroke" x1="306.37" y1="340.97" x2="318.33" y2="346.05"/>
    <line class="stroke" x1="250.22" y1="317.13" x2="262.18" y2="322.21"/>
    <line class="stroke" x1="274.9" y1="353.68" x2="269.82" y2="365.65"/>
    <line class="stroke" x1="298.73" y1="297.53" x2="293.65" y2="309.5"/>
    <line class="stroke" x1="262.02" y1="340.58" x2="249.97" y2="345.45"/>
    <line class="stroke" x1="318.58" y1="317.73" x2="306.53" y2="322.6"/>
  </g>
  
  <g id="balloon">
    <path class="fill" d="M284.28,387.32s-37.5-20.5-37.5-60h0a37.5,37.5,0,0,1,37.5-37.5h0a37.5,37.5,0,0,1,37.5,37.5h0C321.78,366.82,284.28,387.32,284.28,387.32Z"/>
    <polygon class="fill" points="276.67 397.93 284.27 387.32 291.88 397.93 276.67 397.93"/>
    <path class="fill" d="M284.28,294.32a33,33,0,0,0-26.6,13.5h10.51a33,33,0,0,1,21.34-13.08A33.09,33.09,0,0,0,284.28,294.32Zm-33,33h10.5a32.75,32.75,0,0,1,3.64-15H254.9A32.78,32.78,0,0,0,251.28,327.32Z"/>
  </g>
  
  <g id="knife">
    <path class="fill" d="M282.91,286.57c-.08-.11-16.71-9-17-58.79a1.17,1.16,0,0,1,1.14-1.21h15.86Z"/>
    <rect class="fill" x="275.91" y="220.57" width="7" height="6"/>
    <path class="fill" d="M276.41,184.57h0a6.5,6.5,0,0,1,6.5,6.5v29.5a0,0,0,0,1,0,0h-7.09a5.91,5.91,0,0,1-5.91-5.91V191.07A6.5,6.5,0,0,1,276.41,184.57Z"/>
    <line class="fill" x1="268.61" y1="207.55" x2="284.2" y2="191.96"/>
    <line class="fill" x1="268.61" y1="212.55" x2="284.2" y2="196.96"/>
    <rect class="fill" x="278.21" y="215.37" width="2.4" height="2.4" rx="1.2" ry="1.2"/>
  </g>
  
  <line id="rope-01-c" class="stroke" x1="276.41" y1="184.57" x2="276.41" y2="49.57"/>
  <line id="rope-01-b" class="stroke" x1="276.41" y1="49.57" x2="161.01" y2="49.57"/>
  <line id="rope-01-a" class="stroke" x1="124.41" y1="49.57" x2="161.01" y2="49.57"/>
  
  <rect id="pulley-2" class="fill" x="271.41" y="44.57" width="10" height="10" rx="5" ry="5"/>
  <rect id="pulley-1" class="fill" x="113.51" y="44.57" width="10" height="10" rx="5" ry="5"/>
  
  <g id="shelf">
    <rect class="fill" x="111.01" y="142.07" width="100" height="15"/>
    <rect class="fill" x="121.01" y="157.07" width="10" height="4.5"/>
    <rect class="fill" x="191.01" y="157.07" width="10" height="4.5"/>
  </g>
  
  <g id="candle">
    <rect class="fill" x="155.01" y="90.07" width="12" height="40"/>
    <path class="fill" d="M153,86.07v18a1,1,0,0,0,1,1h1a1,1,0,0,0,1-1v-13a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1v3a1,1,0,0,0,1,1h1a1,1,0,0,0,1-1v-3a1,1,0,0,1,1-1h1a1,1,0,0,1,1,1v8a1,1,0,0,0,1,1h1a1,1,0,0,0,1-1v-13a1,1,0,0,0-1-1H154A1,1,0,0,0,153,86.07Z"/>
    <rect class="fill" x="151.01" y="129.74" width="20" height="5"/>
    <rect class="fill" x="141.01" y="134.07" width="40" height="8" rx="2" ry="2"/>
    <path class="stroke" d="M143,134.07v-5h0a5,5,0,0,0-5-5h0a5,5,0,0,0-5,5h0a5,5,0,0,0,5,5h0"/>
    <line class="stroke" x1="161.01" y1="85.07" x2="161.01" y2="80.07"/>
    <path id="flame" class="fill" d="M161,80.07h0a5,5,0,0,1-5-5h0c0-2.76,5-15,5-15s5,12.24,5,15h0A5,5,0,0,1,161,80.07Z" />
  </g>

</svg>

<div class="end-card">
  <h1 class="title">Happy Halloween</h1>
  <a class="button replay" href="#0">Replay</a>
</div>

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html,
body {
  height: 100vh;
  color: #fff;
  font-family: sans-serif;
  background-color: rgba(40, 50, 70, 1);
}

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

.fill { fill: rgba(40, 50, 70, 1); }
.stroke { fill: none; }

.fill,
.stroke {
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.end-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: rgba(40, 50, 70, 0.9);
  opacity: 0;
}

.title {
  margin-bottom: 2rem;
  font-size: 15vh;
  line-height: 1;
  font-family: 'Creepster', cursive;
}

.button {
  padding: 1em 2em;
  color: rgba(40, 50, 70, 1);
  font-weight: bold;
  font-size: 2vh;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #fff;
}

var flameTl = new TimelineMax({ onComplete: function() { this.restart(); } });
var sparkTl = new TimelineMax({ onComplete: function() { this.restart(); } });
var headTl = new TimelineMax({ onComplete: function() { this.restart(); } });
var machineTl = new TimelineMax({ onComplete: function() {
  headTl.play();
  endCardTl.play();
} });
var endCardTl = new TimelineMax();

headTl.pause();
endCardTl.pause();

flameTl
  .to('#flame', 0.25, { scaleY: '1.15', transformOrigin: 'center bottom' })
  .to('#flame', 0.25, { scaleY: '0.85' });

sparkTl
  .to('#spark', 0.1, { opacity: '1' })
  .to('#spark', 0.1, { opacity: '0' });

headTl
  .to('#head', 0.1, { y: '5' })
  .to('#head', 0.25, { y: '0' });


machineTl
  .to('#rope-01-a', 0, { scaleX: '1' }, '2')
  .to('#rope-01-a', 0.1, { scaleX: '0' })
  .to('#rope-01-b', 0.25, { scaleX: '0', transformOrigin: 'right center' }, '2')
  .to('#rope-01-c', 0, { scaleY: '0.25' }, '0')
  .to('#rope-01-c', 0.25, { scaleY: '1' }, '2')
  .to('#knife', 0, { y: '-100%' }, '0')
  .to('#knife', 0.25, { y: '0%' }, '2')
  .to('#balloon', 0.1, { opacity: '0' }, '2.25')
  .to('#pop', 0.25, { scale: '1.5', opacity: '0', transformOrigin: 'center' })
  .to('#rope-02-a', 0.1, { scaleY: '0', transformOrigin: 'center bottom' }, '-=0.25')
  .to('#rope-02-c', 0, { scaleY: '0.95', transformOrigin: 'center bottom' }, '0')
  .to('#rope-02-c', 0.5, { scaleY: '1', transformOrigin: 'center bottom' }, '-=0.25')
  .to('#teeter-totter', 0, { rotation: '-24', transformOrigin: 'center' }, '0')
  .to('#teeter-totter', 0.5, { rotation: '0', }, '-=0.5')
  .to('#base-ball', 0.5, { y: '12', transformOrigin: 'center' }, '-=0.5')
  .to('#base-ball', 1, { x: '28', y: '24', rotation: '55' })
  .to('#base-ball', 0.25, { x: '32', y: '58', rotation: '95', ease: 'linear' })
  .to('#base-ball', 1.5, { x: '126', y: '92', rotation: '255', ease: 'Power1.easeOut' }, '+=0.05')
  .to('#base-ball', 0.25, { x: '142', y: '146', rotation: '350', ease: Power0.easeNone })
  .to('#base-ball', 1.5, { x: '65', y: '174', rotation: '95', ease: 'Power1.easeOut' }, '+=0.05')
  .to('#base-ball', 0.25, { x: '45', y: '220', rotation: '0', ease: Power0.easeNone })
  .to('#base-ball', 1.5, { x: '130', y: '250', rotation: '140', ease: 'Power1.easeOut' }, '+=0.05')
  .to('#base-ball', 0.25, { x: '150', y: '285', rotation: '190', ease: Power0.easeNone })
  .to('#lever', 0.5, { rotation: '180', transformOrigin: 'center 96%', ease: Power2.easeIn })
  .to('#spark', 0.2, { x: '-31', ease: Power0.easeNone })
  .to('#spark', 0.5, { y: '-100', ease: Power0.easeNone })
  .to('#spark', 0.6, { x: '-161', y: '-100', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-161', y: '-120', ease: Power0.easeNone })
  .to('#spark', 0.5, { x: '-71', y: '-120', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-71', y: '-140', ease: Power0.easeNone })
  .to('#spark', 0.5, { x: '-161', y: '-140', ease: Power0.easeNone })
  .to('#spark', 0.5, { x: '-161', y: '-225', ease: Power0.easeNone })
  .to('#spark', 0.3, { x: '-126', y: '-225', ease: Power0.easeNone })
  .to('#spark', 0.5, { x: '-126', y: '-315', ease: Power0.easeNone })
  .to('#spark', 0.3, { x: '-161', y: '-315', ease: Power0.easeNone })
  .to('#spark', 0.3, { x: '-161', y: '-355', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-181', y: '-355', ease: Power0.easeNone })
  .to('#spark', 1.5, { x: '-181', y: '-80', ease: Power0.easeNone })
  .to('#spark', 0.7, { x: '-51', y: '-80', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-51', y: '-60', ease: Power0.easeNone })
  .to('#spark', 0.7, { x: '-181', y: '-60', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-181', y: '-40', ease: Power0.easeNone })
  .to('#spark', 0.7, { x: '-51', y: '-40', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-51', y: '-20', ease: Power0.easeNone })
  .to('#spark', 0.7, { x: '-181', y: '-20', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-181', y: '0', ease: Power0.easeNone })
  .to('#spark', 0.7, { x: '-51', y: '0', ease: Power0.easeNone })
  .to('#spark', 0.2, { x: '-51', y: '20', ease: Power0.easeNone })
  .to('#spark', 1.5, { x: '-341', y: '20', ease: Power0.easeNone })
  .to('#mouth', 0, { opacity: 0 }, '0')
  .to('#mouth', 0.1, { opacity: 1 })

endCardTl.to('.end-card', 1, { opacity: 1 }, '1');

var replay = document.querySelector('.replay');
replay.addEventListener('click', function() {
  endCardTl.pause(0);
  headTl.pause(0);
  machineTl.play(0);
});