Text Animations

by davidxmartins

HTML

<h1 class="letters-animat-01" data-text="EFFECT 01 - with sliding up effect">EFFECT 01</h1>
<br>
<h1 class="letters-animat-02" data-text="EFFECT 02 - with sliding down effect">EFFECT 05</h1>
<br>
<h1 class="letters-animat-03" data-text="EFFECT 03 - with zoom effect">EFFECT 03</h1>
<br>
<h1 class="letters-animat-04" data-text="EFFECT 04 - with perspective effect">EFFECT 05</h1>
<br>
<h1 class="letters-animat-05" data-text="EFFECT 05 - with simple reveal effect">EFFECT 05</h1>

CSS

body {
  font-family: sans-serif;
  background: darkgrey;
  color: white;
}

/* EFFECT 01 */
.letters-animat-01 span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: slide-up 0.6s forwards;
}
@keyframes slide-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

/* EFFECT 02 */
.letters-animat-02 span {
    display: inline-block;
    opacity: 0;
    transform: translateY(-20px);
    animation: letter-fall 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

@keyframes letter-fall {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* EFFECT 03 */


.letters-animat-03 span {
    display: inline-block;
    opacity: 0;
    transform: scale(0.2);
    animation: letter-reveal 0.4s cubic-bezier(.57,.04,.95,.95) forwards;
}

@keyframes letter-reveal {
    to {
      opacity: 1;
      transform: scale(1);
    }
}

/* EFFECT 04 */

.letters-animat-04 span {
    display: inline-block;
    opacity: 0;
    transform: perspective(500px) rotateY(-90deg) scale(0.8);
    animation: letter-reveal 0.8s cubic-bezier(.57,.04,.95,.95) forwards;
}

@keyframes letter-reveal {
    to {
      opacity: 1;
      transform: perspective(500px) rotateY(0deg) scale(1);
    }
}
/* EFFECT 05 */
.letters-animat-05 span {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.6s, transform 0.6s;
    animation: letter-reveal 0.6s forwards;
}

@keyframes letter-reveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll(".letters-animat-01, .letters-animat-02, .letters-animat-03, .letters-animat-04, .letters-animat-05").forEach((elem) => {
        const text = elem.getAttribute('data-text').split("");
        elem.innerHTML = "";
        text.forEach((c, i) => {
            const span = document.createElement("span");
            span.innerHTML = c.trim() === "" 
                ? `<span style="animation-delay:${i * 0.1}s">&nbsp;</span>` 
                : `<span style="animation-delay:${i * 0.1}s">${c}</span>`;
            elem.append(span);
        })
    });
});