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

# Personalizar animaciones en embudos y sitios web

> Ajusta escala, duración, retraso y suavizado de las animaciones de cada elemento desde el editor de páginas.

Con la personalización de animaciones controlas exactamente cómo aparece cada elemento de tus embudos y sitios web: su escala, cuánto dura la animación, cuándo empieza y cómo acelera o frena. Todo se ajusta desde el editor de páginas, con vista previa en tiempo real y sin código ni herramientas externas.

## Qué puedes ajustar

| Ajuste | Rango | Para qué sirve |
| - | - | - |
| **Escala** (Scale) | De 0,5x a 2x | Efectos desde sutiles hasta muy llamativos |
| **Duración** (Duration) | De 0,1 a 3 segundos | Define el ritmo de la animación |
| **Retraso** (Delay) | Hasta 5 segundos | Crea secuencias escalonadas entre elementos |
| **Suavizado** (Easing) | Lineal, Entrada suave, Salida suave, Entrada y salida suaves | Define cómo acelera y desacelera el movimiento |

## Ventajas

* **Control preciso**: ajustas cada animación con valores exactos.
* **Vista previa en tiempo real**: ves el resultado mientras ajustas.
* **Panel ordenado**: todos los controles están agrupados en secciones claras.
* **Acabado profesional**: guías la atención del visitante y refuerzas tu marca sin depender de herramientas externas.

## Cómo personalizar una animación

**1. Abre tus embudos**

En el menú lateral, haz clic en **Sitios** y luego en la pestaña **Embudos** (el proceso es igual en **Sitios web**).

**2. Elige o crea un embudo**

Busca el embudo o haz clic en **+ Nuevo embudo**.

**3. Selecciona la página**

En la lista de pasos, elige la página que quieres animar (por ejemplo, la página de captura o la de agradecimiento).

**4. Abre el editor**

Haz clic en **Editar** y elige **Editar en una pestaña nueva** para trabajar a pantalla completa.

**5. Selecciona el elemento**

Haz clic en el botón, texto, imagen u otro elemento que quieres animar. Sus opciones aparecen en el panel derecho.

**6. Abre la pestaña de animaciones**

En el panel derecho, entra a la pestaña **Animaciones** y haz clic en **Animación de entrada** (Entrance Animation).

**7. Elige un estilo**

Explora las categorías (**Fundido**, **Deslizar**, **Rebote** y más) y haz clic en un estilo, como **Fade In** o **Slide Right**, para ver la vista previa.

**8. Ajusta la animación**

Haz clic en **Ajustar animación** (Adjust Animation) al final del panel. Modifica la **escala**, la **duración**, el **retraso** y el **suavizado**.

### Tipos de suavizado

* **Lineal**: velocidad constante de principio a fin.
* **Entrada suave** (Ease In): empieza lento y acelera.
* **Salida suave** (Ease Out): empieza rápido y frena al final.
* **Entrada y salida suaves** (Ease In Out): empieza y termina lento, más rápido en el medio. Es la opción más natural en la mayoría de los casos.

## Cómo funciona el retraso

Durante el tiempo de retraso, el elemento permanece totalmente oculto y solo se hace visible cuando empieza la animación. Así evitas que un elemento "parpadee" antes de animarse, algo clave cuando creas secuencias escalonadas. Este comportamiento se aplica automáticamente a todas tus animaciones, incluidas las que ya tenías configuradas.

> [!TIP]
>
> Para una secuencia escalonada, usa la misma animación en varios elementos y aumenta el retraso de cada uno (por ejemplo, 0, 0,2 y 0,4 segundos). Evita retrasos largos en contenido importante: el visitante no debería esperar para leer tu oferta.

## Preguntas frecuentes

> **¿Necesito experiencia previa con animaciones?**
>
> No. Los controles están claramente etiquetados y ves el resultado en tiempo real.

> **¿Puedo ver la animación antes de publicar?**
>
> Sí. Todos los ajustes se reflejan en vivo en el editor.

> **¿Qué hace el suavizado?**
>
> Determina cómo se mueve la animación: si empieza lento, termina lento o avanza a velocidad constante.

> **¿Puedo combinar varias animaciones en un mismo elemento?**
>
> No. Cada elemento admite una animación. Puedes usar animaciones distintas en varios elementos para crear efectos coordinados.

## Artículos relacionados

> **[Animaciones de entrada para secciones, filas y columnas](https://help.chateea.com/docs/sitios/animaciones-de-entrada-para-secciones-filas-y-columnas.md)**
>
> Anima bloques completos de tu página.

> **[Varias ventanas emergentes por página](https://help.chateea.com/docs/sitios/varias-ventanas-emergentes-por-pagina.md)**
>
> Crea ventanas emergentes con disparadores distintos.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.