JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="intro_wrap">
    <div class="intro">
        <h1>Start with desire.</h1>
        <h1>Design the experience.</h1>
        <h1>Think by doing.</h1>
    </div>
</div>
<div class="body">
    <p>Creativity is the currency of humanity</p>
</div>

CSS

body {
    margin:0px;
    padding:0px;
    font-family:sans-serif;
}
h1, p {
    margin:0px;
    padding-left:5px;
}
.intro_wrap {
  position:absolute;
  z-index:2;
  display: none;
  border: 1px solid red;
  background:#f1f1f1;
  height:99%;
  width:99.5%;
}
.intro {
    margin:0px auto;
    position:relative;
}
.intro h1 {
  display:none;
}
.body {
  position:relative;
  z-index:0;
  border: 1px solid blue; 
  display: none;
  width:99.5%;
}

JavaScript

// slide down w/ nested message slideDown - slide up to display body
// here everything fires from time = 0 and time = 0 is nested in each rule
// do tut on nested vs. 
$(function () {
  $('.intro_wrap').delay(400).slideDown(1100, 'easeOutExpo', function () {
      $(".intro h1:nth-child(3n+1)").delay(0).slideDown(500, 'easeOutBounce', function () {
          $(".intro h1:nth-child(3n+2)").delay(200).slideDown(500, 'easeOutBounce', function () {
              $(".intro h1:nth-child(3n)").delay(200).slideDown(500, 'easeOutBounce', function () {
              });
          });
      });
      $(this).delay(3600).slideUp('slow');
  });
  $('.body').delay(1900).fadeIn('slow', function () {
  });
});