Animação

O elemento Animação, da categoria Mídia, exibe uma animação pronta do catálogo, sempre centralizada, na página do funil. Ele é puramente visual: dá vida a telas de carregamento, confirmações e momentos de transição, sem capturar dados. Não confunda com o campo Animação da aba Configurações de outros elementos (Pulsar, Crescer, Digitação…), que aplica um efeito a um elemento já existente — aqui, a animação é o próprio conteúdo.

Escolhendo a animação

Na aba Conteúdo, o campo Animação mostra a animação escolhida, já em movimento, e abre a biblioteca de animações — clique no campo ou passe o mouse sobre ele e use Alterar animação. Na janela da biblioteca você busca pelo nome (acentos e maiúsculas não importam), clica na animação e confirma. As animações de carregamento, check, erro e alerta desenhadas na cor da marca aparecem primeiro; as demais vêm em ordem alfabética. A biblioteca é um catálogo pronto: diferente da biblioteca de imagens, não há envio nem exclusão de arquivos. São 27 animações vetoriais (formato Lottie). Para telas de carregamento: Carregando (anel), Carregando (pontos), Carregando (barras), Carregando (pulso), Carregando (círculo de pontos), Carregando (rastro), Ampulheta, Foguete (loader), Gato carregando e Progresso (mão). Para resultados: Sucesso (check), Sucesso (brilho), Sucesso (círculo), Erro (círculo), Erro (X), Erro (exclamação), Alerta (triângulo) e Alerta (ícone). Ilustradas: Robô, Carro, Gato brincando, Urso dançando, Cachorrinho, E-mail enviado, Presente, Foguete (lançamento) e WhatsApp. O elemento chega à página com Sucesso (brilho) selecionada.

Repetição e velocidade

Na seção Geral:

• Repetir (loop) — ligado por padrão; desligado, a animação é reproduzida uma única vez.
• Velocidade — 0.5×, 1×, 1.5× ou 2× (sem valor, 1×).

Aparência

Na aba Tema, seção Geral:

• Largura — porcentagem da coluna da página, de 50% a 100% (sem valor, 100%). Abaixo de 100%, a animação continua centralizada.
• Container — envolve a animação em um card; desligado por padrão. Ao ligar, aparecem a Cor de fundo e a Cor da borda do card, além do Estilo da borda (sólida, tracejada ou pontilhada), da Espessura da borda e do Raio da borda.

Em Cores, a Cor primária pinta as cinco animações de carregamento desenhadas em uma cor só: Carregando (anel), (pontos), (barras), (pulso) e (círculo de pontos). Sem valor, elas herdam a cor primária da página ou do funil, então já nascem na cor da marca. As demais animações usam as cores do próprio desenho e ignoram esse campo — Sucesso (check), Erro (círculo) e Alerta (triângulo) ficam sempre em verde, vermelho e âmbar. A proporção original de cada arte é sempre respeitada.

Configurações

A aba Configurações traz o Nome do elemento (organização interna no editor), o Delay — o elemento só aparece depois de um tempo em minutos e segundos, ou sincronizado com a reprodução de um vídeo da mesma página — e a Exibição condicional, que só exibe o elemento quando uma condição sobre as variáveis da sessão for verdadeira.

No funil publicado

O espaço da animação fica reservado na proporção exata antes de ela carregar, então a página não muda de altura durante o carregamento; cada animação é baixada sob demanda — o visitante baixa apenas a que está na página. Se o sistema do visitante pede para reduzir movimento, a animação fica parada no último quadro — o check, o X ou o alerta já desenhados. A Animação não é clicável e não gera resposta nem evento: nada dela aparece na tabela de Leads nem nos números de Analytics. Com Delay ou Exibição condicional, o elemento surge com um fade quando o tempo ou a condição é satisfeita.