Animaciones de texto
Las animaciones de texto dividen un encabezado o una línea corta de texto en letras, palabras o líneas, y luego animan cada fragmento al entrar — uno tras otro — en el momento en que el texto entra en el viewport por scroll. Úsalas en encabezados y etiquetas cortas, como mucho un párrafo; no están pensadas para el cuerpo del texto.
Esto necesita que el módulo Text esté activado en Animation settings primero. Sin eso, el texto no se divide y permanece estático — aunque ya le hayas añadido clases o atributos.
Una animación de texto se dispara como una animación de entrada (mismo punto de disparo, retraso, comportamiento de "solo una vez" y de repetición que las animaciones de entrada) — pero no es lo mismo. No añadas una animación de entrada y una animación de texto al mismo elemento.
Míralo en acción: Text animations en fancyanimations.com.
Animaciones
Cada fragmento dividido empieza en el estado de abajo, y anima hasta su estado normal y legible.
| Animación | Punto de partida de cada fragmento |
|---|---|
| Fade | Transparente |
| Blur | Difuminado |
| Focus | Difuminado, pequeño y desplazado hacia atrás |
| Slide up / Slide down | Por debajo / por encima de su posición normal |
| Slide up/down + rotate | Desplazado y rotado 75° |
| Zoom in / Zoom out | Reducido hasta desaparecer / ampliado en grande |
| Flip X / Flip Y | Volteado 180° sobre ese eje |
| Skew left-to-right / right-to-left | Inclinado 45° y desplazado |
| Rotate left-to-right / right-to-left | Rotado 120°, reducido hasta desaparecer |
| Swing 3D | Columpiado hacia atrás 90° desde su borde superior |
| Wave | Reducido hasta desaparecer, se pasa de tamaño antes de asentarse en el tamaño final |
| Clip reveal | Recortado desde abajo |
| Typewriter | Oculto, aparece al instante (funciona mejor dividido por letras) |
| Overlay reveal (4 colores de paleta) | Cubierto por una barra de color sólido que se desliza y desaparece — siempre se divide por línea, sin importar el modo de división elegido |
Dividir el texto
| Modo de división | Fragmentos | Espacio entre fragmentos |
|---|---|---|
| Letters (por defecto) | Letras individuales | Aproximadamente 3% de la duración (un poco más entre palabras) |
| Words | Palabras completas | Aproximadamente 14% de la duración |
| Lines | Líneas visuales, recalculadas al redimensionar | Aproximadamente 14% de la duración |
El modo Lines necesita a la vez los ajustes "per line" y "per word" internamente — los paneles se encargan de esto por ti. Cada fragmento individual se anima a lo largo de un tercio de la Duration total; el ajuste Delay es la espera antes de que empiece el primer fragmento.
Ejemplo — un subtítulo de hero revelado palabra por palabra:
h2 "Slide up" animation · split by words · no delay · trigger 20%
Opciones
Los mismos campos que Entrance animations: Duration (por defecto 1s), Delay (sin retraso por defecto — elige el momento con el trigger point), Trigger point, "Fully visible" reference, "Reset below trigger line", "Only once", Disable from tablet/mobile. No hay opción de Loop ni de Elastic para el texto.
- Bricks
- Etch
- Gutenberg
Pestaña Style → Text Animations — solo disponible en los elementos Heading, Basic text, Rich text, Text link, Button, Post title, Post excerpt, Post author y Post meta. Elige una animación, y luego el modo de división (elige solo una entre "Split by words" / "Split by lines" — nunca ambas, y solo cuando realmente necesites algo distinto al modo letras por defecto) y las mismas opciones de Duration/Delay/trigger que en Entrance.
El panel Text Animations en Bricks.
Añade las clases desde el panel Fancy → Text. Su opción "Per line" añade tanto la clase de división por línea como la de división por palabra a la vez.
Con el módulo Text activado, aparece el panel Text Animations en la barra lateral del bloque: actívalo, elige una animación, Duration/Delay/trigger, y la división en palabras/líneas. "Per Line" aquí solo guarda el ajuste de división por línea — la página añade automáticamente la clase de división por palabra correspondiente en cuanto realmente divide el texto. El editor muestra una aproximación en una capa de vista previa; la división real solo ocurre en el front end.
Vídeo explicativo
Problemas comunes
- Dentro de una escena fijada (pinned) o un hero, las palabras ya han aparecido cuando empieza la escena. Las animaciones de texto se disparan al entrar en el viewport por scroll, igual que una animación de entrada — y una escena fijada o un hero ya están en el viewport desde el principio. Para una revelación que realmente esté controlada por el propio scroll, constrúyela con un elemento por palabra dentro de un padre con "Sequence children", cada palabra con su propia fila Fade + Bottom-to-top scroll trigger.
- Los enlaces, el texto en negrita o los saltos de párrafo desaparecen del texto. Los modos
Letters y Words conservan todo ese marcado en línea; el modo Lines reconstruye el texto a
partir de las cajas de línea medidas y solo conserva las clases
<span>— los enlaces, las etiquetas de negrita/cursiva y los saltos de párrafo que haya dentro se pierden. Usa el modo Letters o Words en cualquier texto con enlaces en línea. - El encabezado ya no ocupa todo el ancho, o ya no está centrado. Las clases de animación de
texto fijan
display: inline-blocken el elemento. Fija tú mismodisplay: block(o un ancho explícito) en él. - El texto es visible pero nunca se anima. El módulo Text está desactivado a nivel de sitio — actívalo en Animation settings.
- Un párrafo largo tarda una eternidad en terminar de animarse. El modo letra por letra va sumando retrasos letra a letra a lo largo de todo un párrafo. Cambia al modo Words o Lines, o simplemente usa un Fade in de entrada normal para el cuerpo del texto.