---
url: "/pt/bannerify/animation/split-text.md"
description: "Anime textos por caracteres, palavras ou linhas no Bannerify, com as etapas de configuração atuais, as regras de camadas compatíveis e as limitações da exportação."
---

# Animações Split Text

> Anime textos por caracteres, palavras ou linhas no Bannerify, com as etapas de configuração atuais, as regras de camadas compatíveis e as limitações da exportação.

### Vídeo tutorial: adicione animações Split Text aos banners do Figma

Este vídeo mostra como adicionar animações Split Text (por caractere, palavra ou linha) aos banners do Figma usando o plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/NrzaotL5IMw)

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

## Usar animações Split Text {#using-split-text-animations}

O Bannerify inclui um conjunto próprio de animações **Split Text** para camadas de texto. Com elas, você anima o texto por **caracteres**, **palavras** ou **linhas**, em vez de mover a camada inteira como um único bloco.

Para aplicar uma delas:

1. Adicione uma **camada de texto** comum do Figma ao seu banner.
2. Carregue a camada na linha do tempo do Bannerify.
3. Clique no seletor de animação de **entrada** ou de **saída** dessa camada de texto.
4. Abra o grupo **Split Text (GSAP Only)**.
5. Escolha a animação Split Text que você quer.
6. Visualize o resultado no Bannerify e ajuste o tempo, se necessário.

> **Tip:** Para obter o resultado final mais limpo, use a [exportação HTML / GSAP](/pt/bannerify/export/html) quando quiser o runtime de Split Text próprio do Bannerify.

## Combinar entrada e saída {#entry-and-exit-pairing}

Você pode usar Split Text na **animação de entrada**, na **animação de saída** ou nas duas.

- As animações Split Text de entrada e de saída aparecem na mesma ordem nas listas de seleção, para facilitar a combinação.
- Sempre que possível, os nomes das saídas espelham os das entradas, como **Type On / Type Off**, **Rise / Fall** e **Reveal / Conceal**.
- Para obter os melhores resultados, garanta que a animação de saída comece **depois** que a animação de entrada terminar.

## Camadas de texto compatíveis {#supported-text-layers}

O Split Text só fica disponível quando a camada selecionada pode ser preparada com segurança como texto HTML rico.

Sua camada de texto deve:

- ser uma **camada de texto** comum
- usar uma **fonte web-safe**, uma **Google Font** ou uma fonte personalizada com uma URL direta de **.woff** / **.woff2** adicionada no painel de fontes personalizadas do Bannerify
- não ter links de texto inline
- não ter formatação de lista
- não ter substituições de formatação de texto
- não usar o modo de texto rolável do Bannerify

Se, mais tarde, você voltar uma camada compatível para uma fonte ou configuração de texto incompatível, o Bannerify mantém a animação Split Text selecionada na camada, mas a marca como indisponível até que a camada volte a cumprir os requisitos.

## URLs de fontes personalizadas {#custom-font-urls}

Se a sua camada de texto usa uma fonte personalizada da marca que não está disponível como fonte web-safe nem como Google Font, adicione uma URL direta do arquivo de fonte **.woff** ou **.woff2** no painel de fontes personalizadas do Bannerify.

A URL deve apontar diretamente para o próprio arquivo de fonte, como `https://example.com/fonts/client-font.woff2`. Uma página comum da fonte, uma página de download, um arquivo CSS ou um arquivo ZIP não funcionam nesse campo.

O Bannerify detecta os estilos de fontes personalizadas usados pelas camadas com Split Text e lista cada estilo uma única vez. Assim, você cola a URL para aquele estilo de fonte, em vez de adicionar a mesma URL a cada camada de texto.

Para abrir o painel de fontes personalizadas:

1. Aplique uma animação Split Text à camada de texto com a fonte personalizada.
2. Clique em **Configure Fonts** no aviso abaixo da pré-visualização do banner, ou passe o mouse sobre a camada de texto na linha do tempo e clique em **Fonts**.
3. Cole a URL direta de **.woff** ou **.woff2** para cada estilo de fonte listado.
4. Clique em **Done** e depois visualize ou exporte de novo.

O Bannerify usa essas URLs de fontes para renderizar a pré-visualização do Split Text, as exportações em canvas/vídeo e as exportações HTML / GSAP. Nas exportações HTML / GSAP, o Bannerify também adiciona automaticamente a regra `@font-face` correspondente.

Você ainda pode escolher animações Split Text em camadas com fontes personalizadas antes de adicionar a URL da fonte. O Bannerify mostra um aviso abaixo da pré-visualização do banner até que uma URL válida de **.woff** ou **.woff2** seja adicionada.

> **Note:** Se você já tinha adicionado uma URL de fonte personalizada para o Split Text diretamente em uma camada de texto, o Bannerify move automaticamente essa URL salva para o novo painel de fontes personalizadas quando você o abre.

## Quando o Split Text não está disponível {#when-split-text-is-unavailable}

O Bannerify bloqueia o Split Text em camadas em qualquer uma destas situações:

- a camada selecionada não é uma camada de texto
- a camada tem uma **substituição de formatação**
- o **Scrollable Text** está ativado nessa camada
- o texto contém **links inline**
- o texto está formatado como **lista**
- o Bannerify não consegue preparar a camada de texto para a pré-visualização do Split Text

Quando isso acontece, o Bannerify mostra o motivo diretamente na interface do plugin, em vez de aplicar a animação sem avisar.

Se o único problema for uma fonte personalizada sem uma URL válida de **.woff** / **.woff2**, o Bannerify permite selecionar a animação Split Text e mostra um aviso, em vez de ocultar a opção.

## Aplicação em massa, colar e atalhos do teclado numérico {#bulk-apply-paste-and-numpad-shortcuts}

O Split Text segue regras mais rígidas do que as animações comuns quando você o aplica a várias camadas ao mesmo tempo.

- Todas as camadas selecionadas devem ser **camadas de texto**
- Todas as camadas de texto selecionadas já devem ser **compatíveis** com Split Text, ou precisar apenas de uma URL de fonte personalizada **.woff** / **.woff2**

Essa regra vale para:

- **Aplicação em massa**
- **Copiar / colar animações**
- Ações de **aplicação por atalho do teclado numérico**

Se ao menos uma camada selecionada for incompatível, o Bannerify bloqueia essa ação de Split Text e mostra um aviso.

## Observações sobre pré-visualização e exportação {#preview-and-export-notes}

O Bannerify chama este grupo de **Split Text (GSAP Only)** porque as exportações HTML / GSAP usam o runtime de Split Text próprio do Bannerify.

Nas versões atuais:

- a pré-visualização do Bannerify é compatível com Split Text
- os caminhos de exportação atuais renderizados em canvas também conseguem renderizar Split Text
- a exportação HTML / GSAP continua sendo a melhor opção quando você quer o resultado mais fiel da animação de texto dividido

## Para obter os melhores resultados {#best-results}

- Use Split Text principalmente em títulos curtos, chamadas ou textos compactos.
- Leve em conta as quebras de linha intencionais, porque as animações divididas por linha seguem o layout renderizado do texto.
- Visualize a animação no tamanho final do banner antes de exportar.