JSFiddle - React, Tailwind, and code Playground

SVG animation built by Paige Rickert for Instructure, 2017

HTML

<div id="retain">
  <svg version="1.1" id="head-retain" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 417.3 417.3" style="enable-background:new 0 0 417.3 417.3;" xml:space="preserve">
    <style type="text/css">
      .retain-head0 {
        fill: none;
        stroke: #DE6A4F;
        stroke-miterlimit: 10;
      }
      
      .retain-head1 {
        fill: none;
        stroke: #6D6E70;
        stroke-miterlimit: 10;
      }
      
      .retain-head2 {
        fill: none;
        stroke: #58595B;
        stroke-miterlimit: 10;
      }
      
      .retain-head3 {
        fill: #FBDF65;
        stroke: #6D6E70;
        stroke-miterlimit: 10;
      }
      
      .retain-head4 {
        fill: #65B9D9;
        stroke: #6D6E70;
        stroke-miterlimit: 10;
      }
      
      .retain-head5 {
        fill: #F1F1F2;
        stroke: #6D6E70;
        stroke-miterlimit: 10;
      }
      
      .retain-head6 {
        fill: none;
        stroke: #65B9D9;
        stroke-linecap: round;
        stroke-miterlimit: 10;
      }
      
      .retain-head7 {
        fill: none;
        stroke: #65B9D9;
        stroke-miterlimit: 10;
      }
      
      .retain-head8 {
        fill: #FFFFFF;
        stroke: #6D6E70;
        stroke-miterlimit: 10;
      }
      
      .retain-head9 {
        fill: #FFFFFF;
      }
      
      .retain-head10 {
        fill: #EA7050;
      }
      
      .retain-head11 {
        fill: none;
        stroke: #EA7050;
        stroke-miterlimit: 10;
      }
      
      .retain-head12 {
        fill: none;
      }
      
      .retain-head13 {
        font-family: 'proxima nova light', sans-serif;
        letter-spacing: .12em;
      }
      
      .retain-head14 {
        font-size: 30.5431px;
      }
      
      .retain-head15 {
        letter-spacing: 3;
      }

    </style>

    <g class="icons-to-fly" id="pizza">
      <path class="retain-head0"...

CSS

#retain svg {
  max-height: 80%;
}
#retain svg #head-top-bkg,
#retain svg #head-top {
  transform: translateY(55px);
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}

#retain svg #head-btm-bkg,
#retain svg #head-bottom {
  transform: translateY(-55px);
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}

#retain svg #head-top-line,
#retain svg #head-bottom-line {
  opacity: 0;
  transform: translateY(55px);
  transition: opacity .2s ease-in-out, transform 1s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out, transform 1s ease-in-out;
  -moz-transition: opacity .2s ease-in-out, transform 1s ease-in-out;
  -o-transition: opacity .2s ease-in-out, transform 1s ease-in-out;
}

#retain svg #head-bottom-line {
  transform: translateY(-55px);
}

#retain svg #head-play-btn {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(.2, .2);
  transition: all .8s ease-in-out;
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
}

#retain svg #head-play-btn:hover .retain-head10 {
  fill: #6d6e70;
  cursor: pointer;
}

#retain svg #head-play-btn:hover .retain-head11 {
  stroke: #6d6e70;
}

#retain svg .icons-to-fly {
  transition: all .8s ease-in-out;
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
}

JavaScript

// ----- RETAIN ANIMATION ---- 
var retainFirst = false;

if (retainFirst == false) {
  // step 1: split
  $('.to-fly').css('transform', 'translateY(0)');
  $('.to-fly').addClass('flying');
  $('#head-top-line').css('opacity', '1');
  $('#head-bottom-line').css('opacity', '1');
  // step 2: icons fly
  setTimeout(function() {
    $('#pizza').css('transform', 'translateX(-300px)')
  }, 1300);
  setTimeout(function() {
    $('#chart').css('transform', 'translateX(-360px)')
  }, 1500);
  setTimeout(function() {
    $('#bolt').css('transform', 'translateX(-360px)')
  }, 2200);
  setTimeout(function() {
    $('#controls').css('transform', 'translateX(-160px)')
  }, 1900);
  setTimeout(function() {
    $('#sun').css('transform', 'translateX(-160px)')
  }, 1000);
  setTimeout(function() {
    $('#q-quote').css('transform', 'translateX(-200px)')
  }, 2500);
  setTimeout(function() {
    $('#gears').css('transform', 'translateX(-350px)')
  }, 2000);
  // step 3: head back together
  setTimeout(function() {
    $('#head-top-line').css('transition', 'opacity 1.4s ease-in-out, transform 1s ease-in-out;');
    $('#head-top-line').css('-webkit-transition', 'opacity 1.4s ease-in-out, transform 1s ease-in-out;');
    $('#head-top-line').css('-moz-transition', 'opacity 1.4s ease-in-out, transform 1s ease-in-out;');
    $('#head-top-line').css('-o-transition', 'opacity 1.4s ease-in-out, transform 1s ease-in-out;');

    $('.top').css('transform', 'translateY(55px)');
    $('.btm').css('transform', 'translateY(-55px)');
    $('#head-top-line').css('opacity', '0');
    $('#head-bottom-line').css('opacity', '0');
  }, 3000);
  // step 4: play btn
  setTimeout(function() {
    $('#retain svg #head-play-btn').css('opacity', '1');
    $('#retain svg #head-play-btn').css('transform', 'scale(1.1, 1.1)');
  }, 3800);
  setTimeout(function() {
    $('#retain svg #head-play-btn').css('transform', 'scale(1, 1)');
  }, 4200);
  retainFirst = true;
}