---
url: "/es/bannerify/animation/split-text.md"
description: "Anima el texto por caracteres, palabras o líneas en Bannerify: pasos de configuración, capas compatibles y limitaciones de exportación."
---

# Animaciones Split Text

> Anima el texto por caracteres, palabras o líneas en Bannerify: pasos de configuración, capas compatibles y limitaciones de exportación.

### Tutorial en vídeo: Añade animaciones Split Text a tus banners de Figma

Este vídeo muestra cómo añadir animaciones Split Text (por carácter, palabra o línea) a banners de Figma con el plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/NrzaotL5IMw)

[Video](/assets/videos/bannerify/animation/bannerify-split-text.mp4)

## Usar animaciones Split Text {#using-split-text-animations}

Bannerify incluye un conjunto específico de animaciones **Split Text** para capas de texto. Te permiten animar el texto por **caracteres**, **palabras** o **líneas**, en lugar de mover toda la capa como un solo bloque.

Para aplicar una:

1. Añade una **capa de texto** normal de Figma a tu banner.
2. Carga la capa en la línea de tiempo de Bannerify.
3. Haz clic en el selector de animación de **entrada** o de **salida** de esa capa de texto.
4. Abre el grupo **Split Text (GSAP Only)**.
5. Elige la animación Split Text que quieras.
6. Previsualiza el resultado en Bannerify y ajusta los tiempos si hace falta.

> **Tip:** Para obtener el resultado final más limpio, usa la [exportación HTML / GSAP](/es/bannerify/export/html) cuando quieras el runtime específico de Split Text de Bannerify.

## Combinar entrada y salida {#entry-and-exit-pairing}

Puedes usar Split Text en la **animación de entrada**, en la **animación de salida** o en ambas.

- Las animaciones Split Text de entrada y de salida aparecen en el mismo orden en los selectores para que sea fácil emparejarlas.
- Las etiquetas de salida son simétricas siempre que es posible, como **Type On / Type Off**, **Rise / Fall** y **Reveal / Conceal**.
- Para obtener los mejores resultados, asegúrate de que la animación de salida empiece **después** de que termine la de entrada.

## Capas de texto compatibles {#supported-text-layers}

Split Text solo está disponible cuando la capa seleccionada se puede preparar de forma segura como texto HTML enriquecido.

Tu capa de texto debe:

- ser una **capa de texto** normal
- usar una **fuente web segura**, una **Google Font** o una fuente personalizada con una URL directa a un archivo **.woff** / **.woff2** añadida en el panel de fuentes personalizadas de Bannerify
- no tener enlaces de texto en línea
- no tener formato de lista
- no tener anulaciones de formato de texto
- no usar el modo de texto desplazable de Bannerify

Si más adelante vuelves a cambiar una capa compatible a una fuente o una configuración de texto no compatibles, Bannerify mantendrá en la capa la animación Split Text seleccionada, pero la marcará como no disponible hasta que la capa vuelva a cumplir los requisitos.

## URL de fuentes personalizadas {#custom-font-urls}

Si tu capa de texto usa una fuente de marca personalizada que no está disponible como fuente web segura ni como Google Font, añade una URL directa a un archivo de fuente **.woff** o **.woff2** en el panel de fuentes personalizadas de Bannerify.

La URL debe apuntar directamente al propio archivo de fuente, como `https://example.com/fonts/client-font.woff2`. En este campo no sirve una página normal de la fuente, una página de descarga, un archivo CSS ni un archivo ZIP.

Bannerify detecta los estilos de fuente personalizados que usan las capas Split Text y muestra cada estilo de fuente una sola vez, así que puedes pegar la URL de ese estilo en lugar de añadir la misma URL a cada capa de texto.

Para abrir el panel de fuentes personalizadas:

1. Aplica una animación Split Text a la capa de texto con la fuente personalizada.
2. Haz clic en **Configure Fonts** en el aviso que aparece debajo de la vista previa del banner, o pasa el ratón por encima de la capa de texto en la línea de tiempo y haz clic en **Fonts**.
3. Pega la URL directa al archivo **.woff** o **.woff2** de cada estilo de fuente de la lista.
4. Haz clic en **Done** y vuelve a previsualizar o exportar.

Bannerify usa esas URL de fuentes para renderizar la vista previa de Split Text, las exportaciones de canvas/vídeo y las exportaciones HTML / GSAP. En las exportaciones HTML / GSAP, Bannerify también añade automáticamente la regla `@font-face` correspondiente.

Puedes elegir animaciones Split Text en capas con fuentes personalizadas antes de añadir la URL de la fuente. Bannerify mostrará un aviso debajo de la vista previa del banner hasta que añadas una URL válida a un archivo **.woff** o **.woff2**.

> **Note:** Si antes habías añadido una URL de fuente personalizada para Split Text directamente en una capa de texto, Bannerify mueve automáticamente esa URL guardada al nuevo panel de fuentes personalizadas cuando lo abres.

## Cuándo no está disponible Split Text {#when-split-text-is-unavailable}

Bannerify bloquea Split Text en las capas en cualquiera de estas situaciones:

- la capa seleccionada no es una capa de texto
- la capa tiene una **anulación de formato**
- **Scrollable Text** está activado en esa capa
- el texto contiene **enlaces en línea**
- el texto tiene formato de **lista**
- Bannerify no puede preparar la capa de texto para la vista previa de Split Text

Cuando esto ocurre, Bannerify muestra el motivo directamente en la interfaz del plugin, en lugar de aplicar la animación sin avisar.

Si el único problema es una fuente personalizada sin una URL válida a un archivo **.woff** / **.woff2**, Bannerify te deja seleccionar la animación Split Text y muestra un aviso en lugar de ocultar la opción.

## Aplicación en bloque, pegado y atajos del teclado numérico {#bulk-apply-paste-and-numpad-shortcuts}

Split Text sigue reglas más estrictas que las animaciones normales cuando lo aplicas a varias capas a la vez.

- Todas las capas seleccionadas deben ser **capas de texto**
- Todas las capas de texto seleccionadas deben **cumplir ya los requisitos** de Split Text, o solo necesitar una URL a un archivo de fuente personalizada **.woff** / **.woff2**

Esta regla se aplica a:

- **Aplicar en bloque**
- **Copiar y pegar animaciones**
- **Aplicar con atajos del teclado numérico**

Si una sola de las capas seleccionadas no es compatible, Bannerify bloquea esa acción de Split Text y muestra un aviso.

## Notas sobre la vista previa y la exportación {#preview-and-export-notes}

Bannerify llama a este grupo **Split Text (GSAP Only)** porque las exportaciones HTML / GSAP usan el runtime específico de Split Text de Bannerify.

En las versiones actuales:

- la vista previa de Bannerify admite Split Text
- los métodos de exportación actuales que renderizan con canvas también pueden renderizar Split Text
- la exportación HTML / GSAP sigue siendo la mejor opción cuando quieres el resultado más fiel en animaciones de texto dividido

## Para obtener los mejores resultados {#best-results}

- Usa Split Text sobre todo en titulares cortos, llamadas de atención o textos breves.
- Ten en cuenta los saltos de línea intencionados, porque las animaciones por líneas siguen el diseño del texto renderizado.
- Previsualiza la animación al tamaño final del banner antes de exportar.