Experimento 03

Text
Reveal

Tres técnicas para revelar texto: por línea, por palabra, por carácter. Todas usan el mismo principio — clip desde abajo.

Técnica 01 — Reveal por línea

Cada línea vive

dentro de un overflow

hidden.

El contenedor padre tiene overflow: hidden. El texto empieza en y: 110% — completamente oculto bajo el borde. GSAP lo sube a y: 0.

estructura

<!-- HTML -->
<div class="overflow-hidden">
  <p class="line">Texto</p>
</div>

// GSAP
gsap.from(".line", {
  y: "110%",
  duration: 0.8,
  stagger: 0.12,
  ease: "power2.out",
});

Técnica 02 — Reveal por palabra

Diseñar es hacer
visible lo que no
existía antes.

Cada palabra se envuelve en un span con overflow: hidden inline. GSAP hace stagger por palabra — el resultado parece que el texto se "escribe" de izquierda a derecha.

split manual

// Envolver cada palabra en JS
el.innerHTML = el.innerText
  .split(" ")
  .map(w => `<span class="word-outer">
    <span class="word-inner">${w}</span>
  </span>`)
  .join(" ");

gsap.from(".word-inner", {
  y: "110%",
  stagger: 0.04,
  ease: "power2.out",
});

Técnica 03 — Reveal por carácter

GSAP

variante — scramble

SCROLL TRIGGER

Carácter a carácter con stagger muy corto (0.03s). El scramble usa caracteres aleatorios del mismo juego antes de resolver al texto final — efecto terminal clásico, sin plugins externos.

scramble sin plugin

// Cada carácter pasa por N frames aleatorios
chars.forEach((span, i) => {
  gsap.to(span, {
    duration: 0.6,
    delay: i * 0.04,
    onUpdate() {
      span.textContent =
        progress > 0.8
          ? finalChar
          : randomChar();
    },
    onComplete() {
      span.textContent = finalChar;
    },
  });
});

Resumen

siguiente

04 — Clone awwwards

→