JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="//use.typekit.net/ffm0dmn.js"></script>
<svg version="1.1" id="svg-animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 354 354" xml:space="preserve"><style type="text/css"> .st0{fill:#63BEDD;} .st1{fill:#A0AFB5;} .st2{fill:#A0AFB5;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} .st3{fill:#FFFFFF;} .st4{fill:none;stroke:#A0AFB5;stroke-width:2;stroke-miterlimit:10;} .st5{fill:#37A0E5;} .st6{fill:#4AD3AC;} .st7{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;} .st8{fill:#FBB03B;} .st9{fill:none;stroke:#F96155;stroke-width:2;stroke-miterlimit:10;} .st10{fill:#F96155;} .st11{fill:#F9F9F9;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill:#E2E6E8;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} </style><circle id="bg-circle" class="st0" cx="177" cy="177" r="177"/><g id="all-items"><polygon id="envelope-bg" class="st1" points="89 117 91 115 261 115 262 116 264 118 264 236 88 236 88 118 "/><polygon id="envelope-lip" class="st2" points="265 116 176 56 87 116"/><g id="screens"><g id="screen3"><path class="st3" d="M45 270c-2.8 0-5-2.2-5-5V165c0-2.8 2.2-5 5-5h144c2.8 0 5 2.2 5 5v100c0 2.8-2.2 5-5 5H45z"/><path class="st1" d="M189 161c2.2 0 4 1.8 4 4v100c0 2.2-1.8 4-4 4H45c-2.2 0-4-1.8-4-4V165c0-2.2 1.8-4 4-4H189M189 159H45c-3.3 0-6 2.7-6 6v100c0 3.3 2.7 6 6 6h144c3.3 0 6-2.7 6-6V165C195 161.7 192.3 159 189 159L189 159z"/><line class="st4" x1="108" y1="184" x2="171" y2="184"/><line class="st4" x1="108" y1="192" x2="171" y2="192"/><line class="st4" x1="108" y1="200" x2="171" y2="200"/><line class="st4" x1="108" y1="208" x2="171" y2="208"/><line class="st4" x1="108" y1="216" x2="171" y2="216"/><line class="st4" x1="108" y1="224" x2="171" y2="224"/><line class="st4" x1="108" y1="232" x2="171" y2="232"/><line class="st4"...

CSS

body {
    background: #f9f9f9;
    text-align: center;
}

h1, p {
  font: 35px "adelle-sans", sans-serif;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 60px;
}

p {
  margin-top: -50px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.5);
}

svg {
    display: block;
    margin: 60px auto;
    width: 80%;
    max-width: 320px;
    cursor: pointer;
}
#all-items {
  opacity: 0;
}

JavaScript

try{Typekit.load();}catch(e){}
  var canvas = Snap.select("#svg-animation"),
    allItems = canvas.select("#all-items"),
      
    envelopeBg = canvas.select("#envelope-bg"),
    envelopeFg = canvas.select("#envelope-fg"),
    envelopeLip = canvas.select("#envelope-lip"),

    screens = canvas.select("#screens"),
    screen1 = screens.select("#screen1"),
    screen2 = screens.select("#screen2"),
    screen3 = screens.select("#screen3"),

    circleBg = canvas.select("#bg-circle"),
    bigCircle = canvas.circle(177, 177, 177),
      
    screenlist = [screen1, screen2, screen3];

  var envelopeLipTop = allItems.polygon("265,116 176,56 87,116");
  var closedLip = "265,116 176,176 87,116";
  
  allItems.attr({
    clip: bigCircle,
    opacity: 1
  });
  
  envelopeLipTop.attr({
    opacity: 0
  });

  screens.transform("t0,280");
  envelopeTransform("t0,300", false);

  function envelopeTransform(params, animation, nextAnim) {
    if (!animation) {
      envelopeBg.transform(params);
      envelopeFg.transform(params);
      envelopeLip.transform(params);
    } else {
      envelopeBg.animate({
        transform: params
      }, 300, mina.easeinout);
      envelopeFg.animate({
        transform: params
      }, 300, mina.easeinout);
      envelopeLip.animate({
        transform: params
      }, 300, mina.easeinout, nextAnim);
    }
  }
  
  function animateUp(element) {
    element.animate({
      transform: "t0,-280"
    }, 1000, mina.elastic);
  }

  for (i = 0; i < 3; i++) {
    (function(i) {
      setTimeout(function() {
        animateUp(screenlist[i]);
      }, 200 * i);
    }(i));
  }
  
  function initSequence() {
    screen1.animate({
      transform: "t-59,-243"
    }, 200, mina.easeinout);
    screen3.animate({
      transform: "t59,-319"
    }, 200, mina.easeinout, dropPulse);
  }

  function dropPulse() {
    pulseCircle = canvas.circle(176, 176, 50);

    pulseCircle.attr({
      stroke: "#fff",
      fill: "rgba(0,0,0,0)",
      strokeWidth: 15,
   ...