Las opciones de animación de Divi facilitan añadir una gran variedad de animaciones predefinidas o personalizadas a cualquier elemento de la página.

Con las opciones de animación de Divi, es fácil aplicar animaciones impresionantes a todas las secciones, filas, columnas y módulos que captan la atención.

Puedes combinar efectos de animación usando retrasos escalonados, intensidades y duraciones variables, y más.

Esta guía te mostrará cómo encontrar las opciones de animación de Divi, qué hace cada configuración y consejos y mejores prácticas para usarlas de forma efectiva.

Dónde encontrar las opciones de animación de Divi

1. Haz clic en el icono de engranaje del elemento para abrir la ventana modal de configuración del elemento.
   
2. Ve a la pestaña Diseño.
   
3. Despliega el grupo de opciones Animación.
   

Todas las opciones de animación de Divi explicadas

Configuración predeterminada en las opciones de animación de Divi: Ninguna
Por defecto, ningún elemento dentro de Divi tiene opciones de animación aplicadas.

Eso significa que no hay retraso al cargar, y aparecen tan pronto como el elemento se carga en la página.

El elemento aparecerá cuando hagas scroll hasta él y permanecerá visible hasta que hagas scroll más allá.

Desvanecer

Es una animación clásica que aporta un toque elegante al diseño.

Puedes ajustar la duración y el retraso del desvanecimiento, y más, usando las opciones a continuación para crear una animación personalizada.

• Duración de la animación: Acelera o desacelera la animación ajustando la duración en milisegundos; la duración predeterminada es un segundo.

• Retraso de la animación: Si quieres añadir un retraso antes de que corra la animación, puedes indicarlo aquí en milisegundos. Útil cuando usas varios módulos animados juntos.

• Opacidad inicial de la animación: Aumentar la opacidad inicial puede reducir o eliminar el efecto de desvanecimiento aplicado.

• Curva de velocidad de la animación: Ajusta el método de aceleración de la animación. Aplicar aceleración suave al inicio y fin crea un efecto más fluido que una velocidad lineal.

• Repetición de la animación: Por defecto, las animaciones solo se reproducen una vez. Si quieres que la animación se repita continuamente, elige la opción Loop (bucle).

Deslizar

• Izquierda

• Derecha

• Arriba

• Abajo

• Centro

Según la dirección elegida, la posición inicial del elemento será desde la izquierda, derecha, arriba, abajo o centro de la pantalla.

Se deslizará hasta su posición una vez que el elemento entre en la vista. Puedes ajustar la sensación de la animación deslizar con estos controles:

• Dirección de la animación: Elige hasta cinco direcciones diferentes que ajustan la posición inicial y final de la animación.

• Duración de la animación: Acelera o desacelera la animación ajustando la duración en milisegundos (predeterminado: un segundo).

• Retraso de la animación: Añade un retraso antes de que corra la animación, útil cuando usas múltiples módulos animados.

• Intensidad de la animación: Afecta cuán sutil o agresiva será la animación. Reducir la intensidad crea un movimiento más suave, aumentarla la hace más rápida y enérgica.

• Opacidad inicial de la animación: Aumentarla reduce o elimina el efecto de desvanecimiento.

• Curva de velocidad: Ajusta la aceleración para un efecto más suave.

• Repetición: Por defecto, se ejecuta una vez; elige Loop para repetir continuamente.

Rebotar

Esta animación añade diversión y dinamismo al diseño. Los controles permiten un ajuste detallado:

• Dirección de la animación

• Duración de la animación

• Retraso

• Opacidad inicial

• Curva de velocidad

• Repetición (bucle)

Zoom

Los controles ajustan duración, retraso, intensidad y más, similares a los anteriores.

Girar

Controla la animación con los mismos parámetros que en los ejemplos anteriores.

Desplegar

Parte del elemento se inclina hacia atrás y luego se coloca en su posición al final de la animación.

Se ajusta con los mismos controles que las otras animaciones.

Rodar

Puedes elegir que ruede desde arriba, derecha, izquierda, abajo o centro. Ajusta la animación con los mismos parámetros.

Consejos y mejores prácticas para usar las opciones de animación de Divi

• Sé sutil
  Muchas animaciones pueden distraer y desviar la atención de contenido importante. Las animaciones sutiles mejoran la experiencia sin confundir o distraer.

• Atento a la velocidad
  La velocidad y el tiempo de las animaciones pueden afectar la percepción. Animaciones muy rápidas pueden resultar chocantes y difíciles de seguir. Animaciones muy lentas pueden parecer que el sitio carga lento.

• No animes todo
  La animación debe mejorar la experiencia, dirigir la atención y destacar elementos importantes, no crear una sensación de videojuego. Demasiados movimientos pueden causar confusión y sobrecarga cognitiva.

• Sincroniza las animaciones de Divi
  Animar varios elementos a la vez puede hacer el diseño dinámico y atractivo. Intenta usar distintas animaciones dentro de una sección para captar la atención.

• Ideal para destacar llamadas a la acción (CTA)
  La llamada a la acción es clave para que los usuarios realicen acciones en la página (suscribirse, descargar, enviar consulta, reservar). Animar tus CTA ayuda a que resalten más y llamen la atención.

Continúa aprendiendo

• Cómo añadir animaciones a secciones/filas

• Cómo diseñar una sección principal con transiciones y animaciones personalizadas en Divi

• 8 animaciones de botón con retraso para tu encabezado personalizado de Divi

• Cómo crear animaciones superpuestas con retraso en Divi

• Cómo combinar animaciones y parallax en Divi para diseños únicos

• Cuándo tiene sentido usar animaciones en diseño web