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.

Usar animações Split Text

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.

Para obter o resultado final mais limpo, use a exportação HTML / GSAP quando quiser o runtime de Split Text próprio do Bannerify.

Combinar entrada e saída

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

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

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.

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

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

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

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

• 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.