> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Use animações para aumentar o engajamento

> Adicione animações para destacar elementos, guiar a atenção do usuário e criar experiências de landing page mais envolventes e interativas.

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

***

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/image-17.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=ab72592c91c31fbe3b1262a2491a4a8a" alt="Image" width="664" height="933" data-path="images/image-17.png" />
</Frame>

## 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