Skip to main content
As animações adicionam movimento aos seus elementos para deixar a página mais envolvente e interativa. Elas ajudam a chamar a atenção, guiar os usuários e melhorar a experiência geral.

​
Onde encontrar

  1. Selecione qualquer elemento (botão, imagem, texto etc.)
  2. Vá até o painel da direita
  3. Abra a seção Animation
  4. Clique em + Add ou edite uma animação existente

​
Escolhendo uma animação

No painel de animação, você encontra uma grande biblioteca de animações.
  • Você pode rolar para explorar todas as opções disponíveis
  • Você pode usar a barra de busca para encontrar rapidamente uma animação específica
As animações também são organizadas em categorias, como:
  • Attention Seekers
  • Entrances
👉 Isso facilita encontrar o tipo certo de animação de acordo com o seu objetivo
Image

​
Configurações de animação

​
Trigger

Define quando a animação acontece:
  • On Load → roda quando o elemento aparece
  • On Hover → roda quando o usuário passa o mouse por cima
  • On Click → roda ao clicar
  • On Viewport → roda continuamente (se compatível)

​
Speed

  • Controla a velocidade da animação

​
Delay

  • Adiciona uma pausa antes de a animação começar

​
Repeat

  • Controla quantas vezes a animação é executada

​
Exemplo

  • Animação: Fade In
  • Trigger: On Load
  • Speed: Normal
  • Delay: 0,3s
  • Repeat: 1
👉 Resultado: o elemento aparece suavemente quando a página carrega

​
Boas práticas

  • Mantenha as animações sutis e com propósito
  • Evite usar muitas animações ao mesmo tempo
  • Use animações de entrada para apresentar os elementos com suavidade
  • Use animações de destaque apenas onde for necessário