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 id="container">
<img class="cat-photo" 
src="https://cdn.dribbble.com/users/1118956/screenshots/4635899/hi.jpg" />
</div>


<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: 60px;
  position: absolute;
  z-index: 9;
  left: 30px;
  top: 60px;
 }

.ml3 {
  font-weight: 900;
  font-size: 60px;
}

.cat-photo {
  width: 270px;
  border-radius: 50px; 
  height: 200px;
  position: absolute;
  top: 20; 
  z-index: 9;
  }

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
  });