JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>

CSS

/* General link styles */

.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 4em;
  color: #9e9ba4;
  display: inline-block;
}


/* Kukuri */

.link--kukuri {
  text-transform: uppercase;
  font-weight: 900;
  overflow: hidden;
  line-height: 0.75;
  color: #c5c2b8;
}

.link::before {
  content: attr(data-letters);
  -webkit-transition: all 1.4s;
  transition: all 1.4s;
  width: 0%;
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #424242;
  white-space: nowrap;
}

.animate-overlay::before {
  width: 100%;
}

JavaScript

// $(".link").click(function() {
//   $(this).toggleClass("animate-overlay");
// });

setTimeout(function() {
$(".link").addClass("animate-overlay");
}, 2000);