Skip to main content
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
Image

​
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