JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<link href="https://fonts.googleapis.com/css?family=Heebo:900,400&display=swap" rel="stylesheet">

<div class="heading">
  <h1 id="heading">Hover me!</h1>
</div>
<div class="subtitle">
  <p id="subtitle">Hover me too!</p>
</div>
<p><small><small>Make this tab wider to see clearly</small></small></p>

CSS

body {
  font-family: 'Heebo', sans-serif;
}

h1 {
  font-weight: 900;
  /* text-transform: uppercase; */
  font-size: 6rem;
}

p {
  font-size: 1.5rem;
}

h1, p {
  margin: 0;
  margin-bottom: 0.25rem;
}

.heading h1 span {
  display: inline-block;
  transform: translateZ(25px);
  transform: rotateX(90deg);
  transform-origin: 50% 50% 25px;
  transition: transform 600ms cubic-bezier(0.87, 0, 0.13, 1);
}

.heading h1 span:nth-child(1) {
  transition-delay: 0ms;
}
.heading h1 span:nth-child(2) {
  transition-delay: 50ms;
}
.heading h1 span:nth-child(3) {
  transition-delay: 100ms;
}
.heading h1 span:nth-child(4) {
  transition-delay: 150ms;
}
.heading h1 span:nth-child(5) {
  transition-delay: 200ms;
}
.heading h1 span:nth-child(6) {
  transition-delay: 250ms;
}
.heading h1 span:nth-child(7) {
  transition-delay: 300ms;
}
.heading h1 span:nth-child(8) {
  transition-delay: 350ms;
}
.heading h1 span:nth-child(9) {
  transition-delay: 400ms;
}
.heading h1 span:nth-child(10) {
  transition-delay: 450ms;
}
.heading h1 span:nth-child(11) {
  transition-delay: 500ms;
}

.heading:hover h1 span {
  transform: translateZ(0);
}

.subtitle p span {
  display: inline-block;
  transform: translateZ(25px);
  transform: rotateX(90deg);
  transform-origin: 50% 50% 10px;
  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.subtitle p span:nth-child(1) {
  transition-delay: 0ms;
}
.subtitle p span:nth-child(2) {
  transition-delay: 100ms;
}
.subtitle p span:nth-child(3) {
  transition-delay: 200ms;
}
.subtitle p span:nth-child(4) {
  transition-delay: 300ms;
}
.subtitle p span:nth-child(5) {
  transition-delay: 400ms;
}
.subtitle p span:nth-child(6) {
  transition-delay: 500ms;
}
.subtitle p span:nth-child(7) {
  transition-delay: 600ms;
}
.subtitle p span:nth-child(8) {
  transition-delay: 700ms;
}
.subtitle p span:nth-child(9) {
  transition-delay: 800ms;
}
.subtitle p span:nth-child(10) {
  transition-delay: 900ms;
}
.subtitle p span:nth-child(11) {
 ...

JavaScript

var heading = document.getElementById('heading');
var subtitle = document.getElementById('subtitle');


heading.addEventListener("mouseenter", function( event ) {   
  heading.innerHTML = "<h1><span>T</span><span>h</span><span>i</span><span>s</span> <span>i</span><span>s</span> <span>a</span> <span>t</span><span>e</span><span>x</span><span>t</span></h1>";
}, { once: true });

subtitle.addEventListener("mouseenter", function( event ) {   
  subtitle.innerHTML = "<span>A</span><span>n</span><span>d</span> <span>t</span><span>h</span><span>i</span><span>s</span> <span>i</span><span>s</span> <span>a</span> <span>s</span><span>u</span><span>b</span><span>t</span><span>i</span><span>t</span><span>l</span><span>e</span>";
}, { once: true });