JSFiddle - React, Tailwind, and code Playground

laptop iphone svg

by Travis Almand

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg width="183px" height="101px" viewBox="0 0 183 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>Laptop_iPhone</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="85.8894947" y="66.2067431" width="18.9162123" height="6.3054041" rx="1"></rect>
    </defs>
    <g id="Tour-step-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-69.000000, -128.000000)">
        <g id="Laptop_iPhone" transform="translate(69.000000, 129.000000)">
            <path d="M0,88.8888889 L8.21324157,88.8888889 M12.9027131,88.8888889 L154.316855,88.8888889" id="Laptop-Baseline" stroke="#333333" stroke-linecap="round"></path>
            <path d="M125.965759,98.989899 L173.687477,98.989899 M177.418776,98.989899 L182.197617,98.989899" id="iPhone-Baseline" stroke="#333333" stroke-linecap="round"></path>
            <g id="Laptop" transform="translate(21.265284, 0.000000)">
                <g id="Group-2" transform="translate(0.766539, 0.000000)">
                    <path d="M127.947158,39.2093887 L127.947158,75.2519954 C127.947158,78.1539775 125.594637,80.5064988 122.692655,80.5064988 L13.6617089,80.5064988 C10.7597268,80.5064988 8.40720547,78.1539775 8.40720547,75.2519954 L8.40720547,5.25450342 C8.40720547,2.35252131 10.7597268,4.2666347e-15 13.6617089,3.73354923e-15 L122.692655,0 C125.594637,-5.33085465e-16 127.947158,2.35252131 127.947158,5.25450342 L127.947158,18.4641438 M127.947158,22.1556099 L127.947158,35.6208522" id="Rectangle-4" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
                    <rect id="Rectangle-4-Copy" stroke="#333333" x="14.1617089" y="5.75450342" width="108.293671" height="69.4103458" rx="2"></rect>
                    <path d="M21.0159102,88.2756574 L5.2443986,88.2756574 C2.34799723,88.2756574...

SCSS

body.animate {
  #iPhone {
    animation: 3s animatePhone forwards;
  }
  #Screen-Glare {
    animation: 2s fadeContent 2.5s backwards;
  }
  #iPhone-Baseline {
    animation: 2s animateBaseLine 2s backwards;
    transform-origin: 150px 0;
  }
  #Laptop-Baseline {
    animation: 2s animateBaseLine 2s backwards;
    transform-origin: 90px 0;
  }
}

@keyframes animatePhone {
  0% {
    opacity: 0;
    transform: translate3d(0, -120px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeContent {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes animateBaseLine {
  from { transform: scale3d(0, 1, 1); }
  to { 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');
  }, 4000);
});