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

# Usa animaciones para aumentar la interacción

> Añade animaciones para destacar elementos, guiar la atención del usuario y crear landing pages más atractivas e interactivas.

Las animaciones te permiten añadir movimiento a tus elementos para que la página resulte más atractiva e interactiva. Ayudan a captar la atención, guiar al usuario y mejorar la experiencia general.

***

## Dónde encontrarlo

1. Selecciona cualquier elemento (un botón, una imagen, un texto, etc.)
2. Ve al **panel derecho**
3. Abre la sección **Animation**
4. Haz clic en **+ Add** o edita una animación existente

***

## Elegir una animación

Dentro del panel de animación encontrarás una gran biblioteca de animaciones.

* Puedes **desplazarte** para ver todas las opciones disponibles
* Puedes usar la **barra de búsqueda** para encontrar rápidamente una animación concreta

Las animaciones también están organizadas por **categorías**, como:

* Attention Seekers (para captar la atención)
* Entrances (de entrada)

👉 Así es más fácil encontrar el tipo de animación adecuado para tu 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>

## Ajustes de la animación

### Trigger

Define cuándo se produce la animación:

* **On Load:** se reproduce cuando aparece el elemento
* **On Hover:** se reproduce al pasar el cursor por encima
* **On Click:** se reproduce al hacer clic
* **On Viewport:** se reproduce de forma continua (si es compatible)

***

### Speed

* Controla la velocidad de la animación

***

### Delay

* Añade una pausa antes de que empiece la animación

***

### Repeat

* Controla cuántas veces se reproduce la animación

***

## Ejemplo

* Animación: Fade In
* Trigger: On Load
* Speed: Normal
* Delay: 0.3s
* Repeat: 1

👉 Resultado: el elemento aparece de forma suave al cargar la página

***

## Buenas prácticas

* Mantén las animaciones sutiles y con un propósito claro
* Evita usar demasiadas animaciones a la vez
* Usa las de entrada para introducir elementos con suavidad
* Usa las animaciones llamativas solo donde hagan falta