JSFiddle - React, Tailwind, and code Playground

bank svg

by Travis Almand

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg width="137px" height="101px" viewBox="0 0 137 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>Bank</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Bank" transform="translate(0.000000, 1.000000)">
            <rect id="Foundation" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" x="9.09090909" y="94.9494949" width="118.768328" height="2.63929619"></rect>
            
            <rect id="Baseline" fill="#333333" fill-rule="nonzero" x="0" y="97.979798" width="136.363636" height="2.02020202" rx="1.01010101"></rect>
            <rect id="Rectangle-19-Copy-5" stroke="#333333" fill="#FFFFFF" fill-rule="nonzero" x="32.3232323" y="90.9090909" width="14.1414141" height="3.51906158"></rect>
            <rect id="Rectangle-19-Copy-6" stroke="#333333" fill="#FFFFFF" fill-rule="nonzero" x="61.6161616" y="90.9090909" width="13.1313131" height="3.51906158"></rect>
            <rect id="Rectangle-19-Copy-7" stroke="#333333" fill="#FFFFFF" fill-rule="nonzero" x="89.8989899" y="90.9090909" width="13.1313131" height="3.51906158"></rect>
            <g id="Column-4-container" transform="translate(101.010101, 42.424242)">
            <g id="column-4">
                <polygon id="Shadow-Pillar-4" fill="#B2D1F8" fill-rule="nonzero" transform="translate(13.636364, 27.272728) scale(-1, 1) translate(-13.636364, -27.272728) " points="12.289563 52.5252529 10.101011 52.5252529 10.101011 44.4444449 12.289563 44.4444449 12.289563 2.0202024 17.171718 2.0202024 17.171718 52.5252529"></polygon>
                <path d="M15.216683,15.0622199 L15.216683,25.8948905 M15.216683,29.5883956 L15.216683,44.6448355 L16.9762138,44.6448355 L16.9762138,52.1668296 L2.02020202,52.1668296...

SCSS

#column-1,
#column-2,
#column-3,
#column-4 {
  transform: translate3d(0, 100px, 0);
}

#Shadow-Pillar-1,
#Shadow-Pillar-2,
#Shadow-Pillar-3,
#Shadow-Pillar-4 {
  opacity: 0;
}

#roof {
  transform: translate3d(0, -100px, 0);
}
#roof-shadow-container {
  opacity: 0;
  transform-origin: 67px 0;
}
#Roof-Circle {
  fill: #fff;
}

body.animate {
  #column-1 {
    animation: 0.3s raiseColumns forwards;
  }
  #column-2 {
    animation: 0.3s raiseColumns 0.1s forwards;
  }
  #column-3 {
    animation: 0.3s raiseColumns 0.2s forwards;
  }
  #column-4 {
    animation: 0.3s raiseColumns 0.3s forwards;
  }
  
  #roof {
    animation: 0.25s dropRoof 0.5s forwards linear;
  }
  
  #Shadow-Pillar-1,
  #Shadow-Pillar-2,
  #Shadow-Pillar-3,
  #Shadow-Pillar-4,
  #roof-shadow-container {
    animation: 1s fadeInContent 0.75s forwards;
  }
  #Roof-Circle {
    animation: 1s changeCircleColor 0.75s forwards;
  }
}

@keyframes raiseColumns {
  from { transform: translate3d(0, 100px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes dropRoof {
  0% { transform: translate3d(0, -100px, 0); }
  60% { transform: translate3d(0, 0, 0); }
  80% { transform: translate3d(0, -10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes changeCircleColor {
  from { fill: #fff; }
  to { fill: #B2D1F8; }
}

@keyframes fadeInContent {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInPillarShadows {
  from {
    opacity: 0;
    transform: scale3d(0,1,1);
  }
  to {
    opacity: 1;
    transform: scale3d(1,1,1);
  }
}

@keyframes fadeInRoofShadow {
  from {
    opacity: 0;
    transform: scale3d(-1,1,1);
  }
  to {
    opacity: 1;
    transform: scale3d(1,1,1);
  }
}

JavaScript

document.querySelector('button').addEventListener('click', function () {
	var $this = this;
  
	$this.disabled = true;
	document.body.classList.toggle('animate');
  window.setTimeout(function () {
  	$this.disabled = false;
  	document.body.classList.toggle('animate');
  }, 3000);
});