El reflow responsive: por qué hay que volver a dividir

La división por caracteres y por palabras sobrevive a cualquier cambio de ancho, porque las palabras siguen fluyendo y rompiendo donde toca. La división por líneas no: una línea es un contenedor que encierra un conjunto concreto de palabras, decidido para un ancho concreto, y en cuanto ese ancho cambia el conjunto correcto es otro. Ese es el problema que hunde la mayoría de las implementaciones caseras de animación de texto, y el que hace que un titular perfecto en el portátil salga con una palabra suelta colgando en el móvil.

Una línea es una decisión congelada

Cuando el navegador compone un párrafo, decide dónde romper cada línea en función del ancho disponible, del tamaño de la fuente y de las métricas de los glifos. Esa decisión se rehace cada vez que cambia cualquiera de esos factores, y por eso el texto normal se adapta.

Al dividir por líneas, SplitText toma esa decisión tal como está en ese instante y la materializa: crea un contenedor por línea y mete dentro las palabras que el navegador había puesto en ella. A partir de ahí, esas palabras están encerradas. Si la ventana se estrecha, la última palabra de la primera línea ya no cabe, pero no puede bajar a la segunda: bajará dentro de su propio contenedor, produciendo una línea de dos alturas con una palabra suelta debajo.

Lo mismo pasa, y con más frecuencia, con las fuentes web. Si divides antes de que la fuente termine de cargar, la división se hace con las métricas de la fuente de reserva; cuando llega la definitiva, los anchos de los glifos cambian, y las líneas que habías materializado dejan de corresponder con las que el navegador habría compuesto.

Esos son los dos sucesos que exigen volver a dividir, y no hay un tercero relevante:

• La fuente termina de cargar.
• Cambia el ancho del elemento dividido, siempre que estés dividiendo por líneas.

Volver a dividir significa literalmente eso: restaurar el HTML original y ejecutar la lógica de división otra vez, para que los contenedores de línea encierren el conjunto correcto de palabras.

autoSplit y el problema que crea

autoSplit: true hace exactamente lo anterior por ti: revierte y vuelve a dividir cuando las fuentes terminan de cargar o cuando cambia el ancho del elemento con líneas divididas. Además, SplitText emite un aviso por consola si divides antes de que las fuentes estén listas y no lo has activado.

Pero activarlo crea un problema nuevo, y es el que hay que entender bien. Al redividir se destruyen los elementos anteriores y se crean otros nuevos. Tu animación estaba apuntando a los viejos, que ya no existen en el DOM. El resultado es un texto que desaparece, o que se queda a medio animar, o que aparece de golpe sin animación.

La solución es no crear la animación fuera, sino dentro de onSplit, que se ejecuta cada vez que la división ocurre, incluida cada redivisión.

import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(SplitText);

SplitText.create(".titular", {
  type: "lines, words",
  autoSplit: true,
  onSplit(self) {
    return gsap.from(self.lines, {
      yPercent: 100,
      autoAlpha: 0,
      duration: 0.8,
      stagger: 0.1,
      ease: "power3.out",
    });
  },
});

Hay dos cosas en ese código que no son opcionales.

La primera es que la animación usa self.lines, el array de la instancia que se pasa al callback, y no una variable capturada fuera. Cada llamada a onSplit trae los elementos recién creados.

La segunda es la palabra return. Es la que activa el comportamiento más útil de todo el sistema.

Por qué devolver la animación

Cuando devuelves un tween o una timeline desde onSplit, SplitText hace tres cosas por su cuenta:

Guarda el totalTime() de la animación anterior, es decir, en qué punto exacto de su reproducción estaba.

Revierte y mata la animación anterior, de modo que no quedan tweens huérfanos apuntando a nodos eliminados.

Coloca la animación nueva en ese mismo totalTime(), con lo que la redivisión resulta prácticamente invisible: si el usuario redimensiona la ventana a mitad del revelado, el revelado continúa desde donde iba en lugar de reiniciarse o de romperse.

Sin el return, las dos primeras no ocurren: cada redivisión deja atrás una animación viva sobre elementos muertos, y eso es una fuga de memoria que crece con cada arrastre del borde de la ventana.

// MAL: la animacion se crea fuera y apunta a elementos que dejaran de existir
const split = SplitText.create(".titular", { type: "lines", autoSplit: true });
gsap.from(split.lines, { yPercent: 100, stagger: 0.1 });

// MAL: dentro de onSplit pero sin return. No hay limpieza ni sincronizacion
SplitText.create(".titular", {
  type: "lines",
  autoSplit: true,
  onSplit(self) {
    gsap.from(self.lines, { yPercent: 100, stagger: 0.1 });
  },
});

// BIEN
SplitText.create(".titular", {
  type: "lines",
  autoSplit: true,
  onSplit: (self) => gsap.from(self.lines, { yPercent: 100, stagger: 0.1 }),
});

La alternativa sin autoSplit

Si prefieres control manual, o si tu caso no encaja, el patrón mínimo es esperar a las fuentes antes de dividir y volver a dividir a mano cuando haga falta.

document.fonts.ready.then(() => {
  const split = SplitText.create(".titular", { type: "lines" });

  gsap.from(split.lines, { yPercent: 100, autoAlpha: 0, stagger: 0.1 });

  let anchoAnterior = window.innerWidth;
  window.addEventListener("resize", () => {
    if (window.innerWidth === anchoAnterior) return; // ignorar cambios de alto
    anchoAnterior = window.innerWidth;
    split.split({ type: "lines" });                  // rehace la division
  });
});

split.split() vuelve a dividir con la configuración que le pases, y split.revert() restaura el HTML original. El filtro de ancho es importante: en móvil, la barra de direcciones que aparece y desaparece dispara eventos de resize continuamente sin que el ancho cambie, y redividir en cada uno es un derroche notable.

Si además tienes una animación de scroll asociada al texto, recuerda que la redivisión cambia la altura del bloque, así que hay que refrescar. Es el mismo mecanismo que viste en la lección sobre el refresco de ScrollTrigger.