JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!–– Box1-->
<div class="parent_container">
  <h1 class="ml3">I'm a Cat lover</h1>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
  <div class="child1">
  </div>
  <div class="child2">
  </div>
  <div class="child3">
  </div>
</div>

CSS

@import url(<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">);
.parent_container {
  width: 480px;
  margin: auto;
}

.child1 {
  width: 240px;
  float: right;
  background-color: #e4b1d1;
  height: 400px;
}

.child2 {
  width: 240px;
  float: left;
  background-color: #ddcffc;
  height: 400px;
  font: 15px arial, sans-serif;
}

.child3 {
  width: 240px;
  float: left;
  background-color: #fde17a;
  height: 240px;
  position: absolute;
  top: 5;
}

.parent_container,
h1 {
  font-size: 50px;
  position: absolute;
  z-index: 9;
  left: 30px;
  top: 60px;
}

.ml3 {
  font-weight: 900;
  font-size: 1em;
}

JavaScript

// Wrap every letter in a span
$('.ml3').each(function() {
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({
    loop: true
  })
  .add({
    targets: '.ml3 .letter',
    opacity: [0, 1],
    easing: "easeInOutQuad",
    duration: 2250,
    delay: function(el, i) {
      return 150 * (i + 1)
    }
  }).add({
    targets: '.ml3',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });