<h2>Animation in HTML, CSS & JS</h2><p>Powered by <a href="http://anime-js.com/" target="_blank">anime-js</a></p>
    <svg class="ja" 
         xmlns="http://www.w3.org/2000/svg" 
         width="440"
         height="120"
         viewBox="-165 240 440 120">
    <path class="dark-blue joint joint-j"
          d="M-152.773 284.492c0-1.8 1-2.9 2.9-2.9h2.9c1.9 0 2.9 1 2.9 2.9v32.8c0 11.3-9.9 13.2-13.3 13.2h-1c-1.8 0-2.8-1-2.8-2.9v-1.8c0-2.2 1.4-2.6 2.8-2.8 2.4-.3 5.7-1 5.7-6.3l-.1-32.2z" />
    <path class="dark-blue joint joint-o"
          d="m -118.573,280.792 c 10.6,0 19.2,7.6 19.2,18.2 0,10.7 -8.6,18.2 -19.2,18.2 -10.6,0 -19.1,-7.5 -19.1,-18.2 0,-10.7 8.5,-18.2 19.1,-18.2 z m 0,28.988 c 5.7,0 10.4,-4.388 10.4,-10.788 0,-6.4 -4.7,-10.712 -10.4,-10.712 -5.7,0 -10.3,4.312 -10.3,10.712 0,6.5 4.6,10.788 10.3,10.788 z" />
    <path class="dark-blue joint joint-i-t"
          d="m -93.073,272.892 0,-2 c 0,-1.8 1,-2.9 2.8,-2.9 l 3,0 c 1.8,0 2.9,1 2.9,2.9 l 0,2 c 0,1.8 -1,2.8 -2.9,2.8 l -3,0 c -1.8,0 -2.8,-1 -2.8,-2.8 z" />
    <path class="dark-blue joint joint-i-b"
          d="m -93.073,284.492 c 0,-1.8 1.003,-2.9 2.803,-2.9 l 2.997,0 c 1.8,0 2.8,1 2.8,2.9 l 0,29.1 c 0,1.9 -1,2.9 -2.8,2.9 l -3,0 c -1.8,0 -2.8,-1 -2.8,-2.9 z" />
    <path class="dark-blue joint joint-n"
          d="m -75.973,284.492 c 0,-1.8 1.1,-2.9 2.9,-2.9 l 2.7,0 c 1.8,0 2.8,1 2.8,2.9 l 0,3.7 c 1.5,-2.9 5.3,-7.4 12.3,-7.4 7.7,0 12.1,4 12.1,13.2 l 0,19.5 c 0,1.9 -1,2.9 -2.9,2.9 l -2.9,0 c -1.8,0 -2.9,-1 -2.9,-2.9 l 0,-17.7 c 0,-4.2 -0.908419,-7.1479 -5.308419,-7.1479 -6.1,0 -10.191581,5.1479 -10.191581,11.4479 l 0,13.4 c 0,1.9 -1,2.9 -2.8,2.9 l -3,0 c -1.8,0 -2.8,-1 -2.8,-2.9 z" />
    <path class="dark-blue joint joint-t"
          d="m -35.273,288.992 c -1.8,0 -2.8,-1 -2.8,-2.9 l 0,-1.2 c 0,-1.8 1,-2.9 2.9,-2.9 l 2,0 0,-7 c 0,-1.8 1,-2.9 2.9,-2.9 l 2.673,0 c 1.8,0 2.927,1 2.927,2.9 l 0,7.1 5,0 c 1.8,0 2.9,1 2.9,2.9 l 0,1.2 c 0,1.9 -1,2.9 -2.8,2.9 l -5.1,0 0,13.5 c 0,5.2 3.2,6.2 5.6,6.5 2.1,0.2 2.9,0.9 2.9,2.8 l 0,2.1 c 0,2 -1.2,2.9 -3.5,2.9 -6.2,0 -13.6,-3.3 -13.6,-12.8 l 0,-15.1 z" />
    <path class="grey-blue academy-a1"
          d="M15.827 295.392h2v-1.1c0-6.6-3.6-8.9-8.5-8.9-3.8 0-6.8 1.4-8.3 2.4-1 .5-1.7.3-2.3-.5l-.4-.7c-.5-.9-.4-1.8.5-2.3 1.8-1.1 5.6-3 10.9-3 8.2 0 12.8 4.6 12.8 13.2v20.3c0 1.1-.5 1.7-1.6 1.7h-1.1c-1.1 0-1.7-.5-1.7-1.7v-2.7c0-1.6.2-2.6.2-2.6h-.1c.1 0-3.1 7.8-11.6 7.8-5.8 0-11.6-3.4-11.6-10-.1-11.3 14.2-11.9 20.8-11.9zm-8.5 17.9c6.6 0 10.5-6.8 10.5-12.8v-1.6h-1.9c-5.4 0-16.2.2-16.2 7.9 0 3.2 2.5 6.5 7.6 6.5z" />
    <path class="grey-blue academy-c"
          d="M48.227 281.192c5.9 0 9.7 2.5 11.4 3.9.8.6.9 1.4.2 2.3l-.5.8c-.6 1-1.4 1-2.3.3-1.5-1.2-4.5-3.1-8.7-3.1-7.5 0-13.4 5.7-13.4 13.8 0 8.1 5.9 13.8 13.4 13.8 4.8 0 8.1-2.3 9.7-3.6.9-.7 1.6-.5 2.3.4l.5.7c.5.9.3 1.6-.4 2.3-1.8 1.4-5.9 4.4-12.2 4.4-10.2 0-18-7.3-18-17.9 0-10.6 7.8-18.1 18-18.1z" />
    <path class="grey-blue academy-a2"
          d="M86.827 295.392h2v-1.1c0-6.6-3.6-8.9-8.5-8.9-3.8 0-6.8 1.4-8.3 2.4-1 .5-1.7.3-2.3-.5l-.4-.7c-.5-.9-.4-1.8.5-2.3 1.8-1.1 5.6-3 10.9-3 8.2 0 12.8 4.6 12.8 13.2v20.3c0 1.1-.5 1.7-1.6 1.7h-1.1c-1.1 0-1.7-.5-1.7-1.7v-2.7c0-1.6.2-2.6.2-2.6h-.1c.1 0-3.1 7.8-11.6 7.8-5.8 0-11.6-3.4-11.6-10-.1-11.3 14.2-11.9 20.8-11.9zm-8.5 17.9c6.6 0 10.5-6.8 10.5-12.8v-1.6h-1.9c-5.4 0-16.2.2-16.2 7.9-.1 3.2 2.5 6.5 7.6 6.5z" />
    <path class="grey-blue academy-d"
          d="M116.727 281.192c8.3 0 11.3 6.9 11.3 6.9h.1s-.2-1.2-.2-2.6v-15.4c0-1.1.6-1.7 1.7-1.7h1.3c1.1 0 1.6.6 1.6 1.7v44.5c0 1.1-.5 1.7-1.6 1.7h-1.2c-1.1 0-1.7-.5-1.7-1.6v-2.6c0-1.2.3-2.1.3-2.1h-.2s-2.9 7.2-11.9 7.2c-9.2 0-14.9-7.4-14.9-18 0-10.9 6.4-18 15.4-18zm.2 31.8c5.7 0 11.1-4.1 11.1-13.8 0-7-3.5-13.7-10.9-13.7-6.1 0-11.1 5-11.1 13.7 0 8.4 4.5 13.8 10.9 13.8z" />
    <path class="grey-blue academy-e"
          d="M157.727 281.192c9.1 0 14.3 6.6 14.3 16.4 0 1-.8 1.7-1.8 1.7h-24.6c.2 8.7 6.2 13.7 13.3 13.7 4.3 0 7.4-1.9 9-3.1 1-.6 1.7-.5 2.3.4l.5.8c.5.8.3 1.6-.5 2.3-1.8 1.4-5.9 3.8-11.5 3.8-10.2 0-17.9-7.4-17.9-17.9 0-11.3 7.7-18.1 16.9-18.1zm9.7 14.6c-.3-7.2-4.6-10.8-9.8-10.8-5.7 0-10.7 3.8-11.8 10.8h21.6z" />
    <path class="grey-blue academy-m"
          d="M180.227 283.792c0-1.1.6-1.7 1.7-1.7h1.2c1 0 1.6.6 1.6 1.7v4c0 1.4-.3 2.5-.3 2.5h.1c1.7-4.6 7.2-8.9 12.6-8.9 6.3 0 9.6 2.9 10.6 8.6h.1c1.9-4.4 6.9-8.6 12.6-8.6 8.3 0 11.4 4.8 11.4 13.3v20.1c0 1.1-.6 1.7-1.7 1.7h-1.2c-1.1 0-1.7-.6-1.7-1.7v-19c0-5.6-1.2-10.2-7.4-10.2-6.9 0-11.5 7.2-11.5 14.3v14.9c0 1.1-.5 1.7-1.6 1.7h-1.3c-1.1 0-1.7-.6-1.7-1.7v-19c0-5.2-.8-10.2-7.2-10.2-7 0-11.7 7.4-11.7 14.3v14.9c0 1.1-.5 1.7-1.6 1.7h-1.3c-1.1 0-1.7-.6-1.7-1.7v-31z" />
    <path class="grey-blue academy-y"
          d="M239.727 325.692c.8.3 1.8.9 3 .9 3.1 0 5.1-2.7 6.4-5.7l2-4.8-13.5-32.1c-.5-1.2.1-2 1.3-2h1.6c1 0 1.6.4 1.9 1.3l9.6 23.7c.6 1.7 1.2 3.6 1.2 3.6h.1s.5-1.9 1.2-3.6l9.4-23.7c.3-1 .9-1.4 1.9-1.4h1.5c1.2 0 1.8.8 1.4 2l-16.2 39.3c-1.8 4.4-5.3 7.4-9.9 7.4-2 0-3.6-.7-4.7-1.2-.9-.4-1.2-1.4-.8-2.2l.4-.8c.6-.7 1.3-1 2.2-.7z" />
    <path class="dark-blue man man-r-foot"
          d="m -0.007181,307.4463 c -3.887371,-2.67156 -1.375284,-8.25058 2.8141509,-7.91691 2.778395,0.36895 2.8285734,1.37246 3.8622508,2.76246 0.4047257,1.66683 0.2840287,3.46163 -0.7668182,4.40668 -1.7564225,1.5796 -3.3174867,2.50723 -5.9095835,0.74777 z" />
    <path class="dark-blue man man-l-foot"
          d="m -0.007181,307.4463 c -3.887371,-2.67156 -1.375284,-8.25058 2.8141509,-7.91691 2.778395,0.36895 2.8285734,1.37246 3.8622508,2.76246 0.4047257,1.66683 0.2840287,3.46163 -0.7668182,4.40668 -1.7564225,1.5796 -3.3174867,2.50723 -5.9095835,0.74777 z" />
    <path class="dark-blue man man-r-arm"
          d="m 9.455,272.592 c -4.2,5 -0.5,13.9 9.5,12.6 6.7,-0.8 10.4,2.9 12.6,0.3 1.9,-2.3 -1.55,-7.975 -6.5125,-11.85 -4.9625,-3.875 -11.4375,-5.95 -15.5875,-1.05 z" />
    <path class="dark-blue man man-body"
          d="m 40.955,283.292 c 10.6,-2.8 21.3,9.3 12.3,23.5 -6.1,9.5 -3,17.9 -8.6,19.3 -4.9,1.2 -11.075,-8.125 -13.4,-18.4375 -2.325,-10.3125 -0.8,-21.6125 9.7,-24.3625 z" />
    <path class="dark-blue man man-head"
          d="m 58.455002,256.29199 a 15,15 0 0 1 -15,15 15,15 0 0 1 -15,-15 15,15 0 0 1 15,-15 15,15 0 0 1 15,15 z" />
    <path class="dark-blue man man-l-arm"
          d="m 85.555,259.892 c 5.8,5.3 2.7,16.4 -9.4,16.5 -8.1,0 -11.9,5.1 -14.9,2.3 -2.6,-2.5 0.625,-9.825 5.925,-15.2125 5.3,-5.3875 12.675,-8.8375 18.375,-3.5875 z" />
  </svg>
      </g>
    </svg>
    <script src="anime.min.js"></script>
    <script src="heart.js"></script>

body {
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial;
  text-align: center;
}
.dark-blue {
  fill:#36495E;
}
.grey-blue {
  fill:#415C7D;
}
.blue {
  fill:#87BADE;
}
.joint-i-b {
  transform-origin: 50% 50%;
}
.ja {
  transform: scale(.75);transform-origin: 50% 0;
}
.man {
  opacity: 0
}

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

var xOffsets = [155, 145, 135, 137, 143, 133];

var jointMorph = [
  { selector: '.joint-j',
    d: ['m -152.8,284.492 c 0,-1.8 1,-2.712 2.9,-2.712 l 2.9,0 c 1.9,0 3,0.8 3,2.7 l 0,32.8 c 0,11.3 -9.5936,13.212 -12.9936,13.212 l -1.4064,0 c -1.8,0 -2.8,-1 -2.8,-2.9 l 0,-1.8 c 0,-2.2 1.4,-2.6 2.8,-2.8 2.4,-0.3 5.7,-1 5.7,-6.3 z', 'm -152.8,302.53031 c 0,-1.84584 2.29317,-3.74017 4.19317,-3.74017 l 0.21787,0 c 1.9,0 4.38896,1.95544 4.38896,3.90383 l 0,0.47567 c 0,1.80699 -0.95793,4.4205 -4.35793,4.4205 l -0.62082,0 c -1.8,0 -3.71525,-2.07106 -3.74047,-3.35701 l -0.014,-0.71376 c -0.0212,-1.08029 -0.0251,0.71223 -0.0251,-0.42775 0,-1.85601 -0.0375,5.16264 -0.0375,-0.27233 z']},
  { selector: '.joint-o',
    d: ['m -118.573,280.792 c 10.6,0 19.2,7.6 19.2,18.2 0,10.7 -8.6,18.2 -19.2,18.2 -10.6,0 -19.1,-7.5 -19.1,-18.2 0,-10.7 8.5,-18.2 19.1,-18.2 z m 0,28.988 c 5.7,0 10.4,-4.388 10.4,-10.788 0,-6.4 -4.7,-10.712 -10.4,-10.712 -5.7,0 -10.3,4.312 -10.3,10.712 0,6.5 4.6,10.788 10.3,10.788 z', 'm -118.573,299.48 c 2.81059,0 4.373,1.44279 4.373,4.11791 0,3.04606 -1.63014,4.68209 -4.373,4.68209 -2.87833,0 -4.427,-2.31336 -4.427,-4.95302 0,-1.75911 1.41321,-3.84698 4.427,-3.84698 z m 0,4.4 c 5.7,0 -0.0297,6.11791 -0.0297,-0.28209 0,-6.4 5.59424,0.28209 -0.10577,0.28209 -5.7,0 0.0952,-0.73843 0.0952,-0.55302 0,0.25154 -5.6597,0.55302 0.0403,0.55302 z']},
  { selector: '.joint-i-t',
    d: ['m -93.073,272.892 0,-2 c 0,-1.8 1,-2.9 2.8,-2.9 l 3,0 c 1.8,0 2.9,1 2.9,2.9 l 0,2 c 0,1.8 -1,2.8 -2.9,2.8 l -3,0 c -1.8,0 -2.8,-1 -2.8,-2.8 z', 'm -93.1,304.33493 0,-0.79557 c 0,-2.05715 2.162972,-4.05936 3.983662,-4.05936 l 0.596059,0 c 1.820689,0 4.220279,1.88793 4.220279,4.05936 l 0,0.72783 c 0,2.05714 -2.29844,4.01281 -4.220279,4.01281 l -0.596059,0 c -1.82069,0 -3.983662,-1.88793 -3.983662,-3.94507 z']},
  { selector: '.joint-i-b',
    d: ['m -93.073,284.492 c 0,-1.8 1.003,-2.9 2.803,-2.9 l 2.997,0 c 1.8,0 2.8,1 2.8,2.9 l 0,29.1 c 0,1.9 -1,2.9 -2.8,2.9 l -3,0 c -1.8,0 -2.8,-1 -2.8,-2.9 z', 'm -75.926531,303.25157 c 0,-1.98424 2.08002,-3.77157 3.92188,-3.77157 l 0.95931,0 c 1.84186,0 3.91881,1.67709 3.91881,3.77157 l 0,1.25686 c 0,2.09448 -2.07695,3.77157 -3.91881,3.77157 l -0.96238,0 c -1.84186,0 -3.91881,-1.67709 -3.91881,-3.77157 z']},
  { selector: '.joint-n',
    d: ['m -75.973,284.492 c 0,-1.8 1.1,-2.9 2.9,-2.9 l 2.7,0 c 1.8,0 2.8,1 2.8,2.9 l 0,3.7 c 1.5,-2.9 5.3,-7.4 12.3,-7.4 7.7,0 12.1,4 12.1,13.2 l 0,19.5 c 0,1.9 -1,2.9 -2.9,2.9 l -2.9,0 c -1.8,0 -2.9,-1 -2.9,-2.9 l 0,-17.7 c 0,-4.2 -0.908419,-7.1479 -5.308419,-7.1479 -6.1,0 -10.191581,5.1479 -10.191581,11.4479 l 0,13.4 c 0,1.9 -1,2.9 -2.8,2.9 l -3,0 c -1.8,0 -2.8,-1 -2.8,-2.9 z', 'm -62.392335,304.27033 c -0.05962,-0.60484 -0.125819,-0.89451 0.122907,-1.5792 l 0.159935,-0.44026 c 0.186641,-0.51378 0.407675,-1.02467 1.038957,-1.57045 l 0.812808,-0.70271 c 0.399821,-0.13241 0.998891,-0.42998 2.106034,-0.42998 1.401786,0 1.883213,0.0777 2.583375,0.74353 l 1.224026,1.16392 c 0.368688,0.35059 0.730495,1.3893 0.622167,2.56133 l -0.08322,0.90039 c -0.08276,0.89537 -0.602105,1.30799 -1.172783,2.07845 l -1.263703,0.78556 c -0.584502,0.41211 -1.048013,0.39464 -1.973019,0.38345 -0.980819,-0.0118 -0.918499,0.20563 -1.639666,-0.21516 l -0.541872,-0.31617 c -0.601378,-0.3509 -0.52623,-0.27423 -0.903448,-0.82537 l -0.324513,-0.47414 c -0.339726,-0.49636 -0.637386,-0.73827 -0.700246,-1.37598 z']},
  { selector: '.joint-t',
    d: ['m -35.273,288.992 c -1.8,0 -2.8,-1 -2.8,-2.9 l 0,-1.2 c 0,-1.8 1,-2.9 2.9,-2.9 l 2,0 0,-7 c 0,-1.8 1,-2.9 2.9,-2.9 l 2.673,0 c 1.8,0 2.927,1 2.927,2.9 l 0,7.1 5,0 c 1.8,0 2.9,1 2.9,2.9 l 0,1.2 c 0,1.9 -1,2.9 -2.8,2.9 l -5.1,0 0,13.5 c 0,5.2 3.2,6.2 5.6,6.5 2.1,0.2 2.9,0.9 2.9,2.8 l 0,2.1 c 0,2 -1.2,2.9 -3.5,2.9 -6.2,0 -13.6,-3.3 -13.6,-12.8 l 0,-15.1 z', 'm -32.472311,301.28014 c 0.212445,-0.37104 0.54412,-0.65675 0.315763,-0.46158 l 0.518277,-0.44295 c 0.419967,-0.35893 0.115791,-0.17688 0.732512,-0.39385 l 0.577587,-0.2032 0.812807,-0.15886 c 0.470347,-0.0919 0.19882,-0.12882 0.867981,0.0126 l 0.64098,0.13546 c 1.761098,0.3722 -0.326419,-1.00389 1.030448,0.32611 l 0.609606,0.59754 0.68146,0.37013 c 0.527118,0.46434 0.297335,0.30284 0.501254,0.72089 l 0.258609,0.53017 c 0.167394,0.34317 0.373227,0.79851 0.320228,1.37499 l 0.004,0.5569 -0.410865,1.3681 c -0.478292,1.59262 -1.747632,2.15134 -1.579803,1.96182 -0.639531,0.53668 -1.391292,0.6742 -1.849244,0.68452 l -0.892516,0.0201 c -1.035457,0.0233 -1.804802,-0.36738 -3.031985,-1.67247 -0.962206,-1.0233 -1.093551,-2.24454 -1.039494,-2.58636 l 0.24288,-1.53582 z']}
  ];
var academyFade = ['.academy-a1', '.academy-c', '.academy-a2', '.academy-d', '.academy-e', '.academy-m', '.academy-y'];
var wave = ['.joint-j', '.joint-o', '.joint-i-t', '.joint-i-b', '.joint-n', '.joint-t'];

var manMorph = [
  { selector: '.man-r-foot',
    d: ['m 42.12481,304.15604 c 0.206355,2.89261 2.44509,4.25571 5.165025,4.20098 2.676806,-1.03948 2.712606,-1.47606 3.523646,-3.35763 0.51104,-3.40159 -1.565217,-5.23066 -4.074077,-5.48301 -2.860035,-0.28768 -4.918844,2.51758 -4.614594,4.63966 z', 'm 9.455,272.592 c -4.2,5 -0.5,13.9 9.5,12.6 6.7,-0.8 10.4,2.9 12.6,0.3 1.9,-2.3 -1.55,-7.975 -6.5125,-11.85 -4.9625,-3.875 -11.4375,-5.95 -15.5875,-1.05 z']},
  { selector: '.man-l-foot',
    d: ['m 29.15032,307.31368 c 2.684236,-2.05974 1.794089,-5.94261 -0.600206,-7.27833 -2.679433,-1.04852 -3.297291,-0.5298 -4.434606,0.15899 -0.905049,0.4388 -2.518462,2.53822 -2.109791,4.14298 1.299137,5.10141 5.797352,4.20714 7.144643,2.97636 z', 'm 77.755,354.592 c 5.8,-2.5 6.4,-11.7 -2.7,-15 -6.1,-2.2 -7.7,-7.1 -10.7,-5.7 -2.7,1.15 -2.225,7.55 0.3625,13.05 2.5875,5.5 7.2875,10.1 13.0375,7.65 z'
      ]},
  { selector: '.man-r-arm',
    d: ['m 3.992819,307.4463 c -3.887371,-2.67156 -1.375284,-8.25058 2.8141509,-7.91691 2.778395,0.36895 2.8285734,1.37246 3.8622508,2.76246 0.4047257,1.66683 0.2840287,3.46163 -0.7668182,4.40668 -1.7564225,1.5796 -3.3174867,2.50723 -5.9095835,0.74777 z', 'm 15.755,334.492 c -3.6,-4.3 -0.3,-11.9 8.2,-10.8 5.7,0.8 9,-2.5 10.8,-0.2 1.65,2.05 -1.325,6.925 -5.6,10.225 -4.275,3.3 -9.85,5.025 -13.4,0.775 z']},
  { selector: '.man-body',
    d: ['m 62.99242924,307.4463 c -3.88737104,-2.67156 -1.37528404,-8.25058 2.81415086,-7.91691 2.778395,0.36895 2.8285734,1.37246 3.8622508,2.76246 0.4047257,1.66683 0.2840287,3.46163 -0.7668182,4.40668 -1.7564225,1.5796 -3.3174867,2.50723 -5.90958346,0.74777 z','m 50.955,283.292 c 10.6,-2.8 21.3,9.3 12.3,23.5 -6.1,9.5 -3,17.9 -8.6,19.3 -4.9,1.2 -11.075,-8.125 -13.4,-18.4375 -2.325,-10.3125 -0.8,-21.6125 9.7,-24.3625 z']},
  { selector: '.man-head',
    d: ['m 89.640715,303.88 a 4.4000001,4.4000001 0 0 1 -4.4,4.4 4.4000001,4.4000001 0 0 1 -4.4,-4.4 4.4000001,4.4000001 0 0 1 4.4,-4.4 4.4000001,4.4000001 0 0 1 4.4,4.4 z','m 68.455002,256.29199 a 15,15 0 0 1 -15,15 15,15 0 0 1 -15,-15 15,15 0 0 1 15,-15 15,15 0 0 1 15,15 z']},
  { selector: '.man-l-arm',
    d: ['m 108.27309,301.40671 c 2.15997,3.28841 -0.48738,6.82427 -2.96045,6.6848 -2.78364,0.47895 -3.79118,-1.07002 -4.87537,-2.57685 -0.6842,-1.58999 0.088,-3.63028 1.07421,-4.67746 1.69406,-1.79885 5.1327,-2.04625 6.76161,0.56951 z', 'm 95.555,259.892 c 5.8,5.3 2.7,16.4 -9.4,16.5 -8.1,0 -11.9,5.1 -14.9,2.3 -2.6,-2.5 0.625,-9.825 5.925,-15.2125 5.3,-5.3875 12.675,-8.8375 18.375,-3.5875 z']}
];

jointMorph.forEach(function(anim, index) {
  timeline
  .add({
    targets: anim.selector,
    d: {
      value: anim.d,
      duration: 280 + index * 20,
      delay: 1700 - index * 50,
      easing: 'easeInOutQuad'
    },
    translateX: {
      value: [0, xOffsets[index]],
      duration: 280 + index * 20,
      delay: 1700 - index * 50,
      easing: 'easeInOutQuad'
    },
    offset: 0
  });
});

academyFade.forEach(function(anim, index) {
  timeline
  .add({
    targets: anim,
    opacity: {
      value: [1, 0],
      duration: 300,
      delay: 1300 + 80 * index,
      easing: 'easeOutQuad'
    },
    translateX: {
      value: [0, 3],
      duration: 300,
      delay: 1300 + 80 * index,
      easing: 'easeOutQuad'
    },
    offset: 0
  });
});

var yWave = [0, 6, -5, 4, -2, 0];

wave.forEach(function(anim, index) {
  for (var i = 0; i < 5; i++) {
    timeline
    .add({
      targets: anim,
      translateX: {
        value: [xOffsets[index], xOffsets[index]]
      },
      translateY: {
        value: [yWave[i], yWave[i + 1]],
        duration: 300,
        delay: 0,
        easing: 'easeInOutQuad'
      },
      offset: 2300 + i * 300 - index * 100
    });
  }
});

manMorph.forEach(function(anim, index) {
  timeline
  .add({
    targets: anim.selector,
    d: {
      value: anim.d,
      duration: 280 + index * 20,
      delay: 3800,
      easing: 'easeInOutQuad'
    },
    fill: {
      value: ['#36495E', '#87BADE'],
      duration: 280 + index * 20,
      delay: 3800,
      easing: 'easeInOutQuad'
    },
    offset: 0
  });
});

timeline
.add({
  targets: '.man',
  opacity: {
    value: [0, 1],
    duration: 50,
    delay: 3700,
    easing: 'easeInOutQuad'
  },
  offset: 0
});

timeline
.add({
  targets: '.joint',
  opacity: {
    value: [1, 0],
    duration: 50,
    delay: 3750,
    easing: 'easeInOutQuad'
  },
  offset: 0
});