Motion.page

Animaciones para WordPress sin escribir una sola línea de JavaScript

Crear animaciones a medida en un sitio WordPress suele significar tirar de GSAP, Framer Motion o CSS a mano, y depender de un desarrollador cada vez que quieres ajustar un timing o añadir un efecto de scroll. Motion.page elimina ese paso intermedio: es un constructor visual de animaciones que se instala como plugin, se conecta a tu web en vivo y te deja seleccionar cualquier elemento, elegir un disparador y definir el movimiento arrastrando en una línea de tiempo, sin tocar código.

Cómo funciona el constructor de Motion.page

El plugin añade un editor visual que se abre directamente sobre tu página real, no sobre una maqueta aparte. Haces clic en el elemento que quieres animar (un título, una imagen, un botón), eliges cuándo debe activarse la animación y ajustas duración y curva de easing con controles gráficos. Por debajo, Motion.page traduce cada ajuste en código limpio basado en su propio SDK, sin dependencias externas, listo para publicarse.

Para poner en marcha una animación no hace falta tocar la configuración de WordPress: el propio plugin se instala desde el escritorio de administración y carga el runtime necesario automáticamente.

Qué tipos de animación puedes crear con Motion.page

• Animaciones de scroll: secciones ancladas, timelines que avanzan según el desplazamiento (scroll-scrubbing) y efectos de parallax por capas.
• Transiciones de página: efectos de entrada y salida al navegar entre secciones o vistas.
• Hover y gestos: reacciones al pasar el ratón, al hacer clic o a gestos táctiles.
• Cursores personalizados: sustitución o transformación del cursor según el contexto.
• Efectos escalonados (stagger): animar cientos de elementos en cascada, desde el centro, desde los bordes o de forma aleatoria en una cuadrícula, manteniendo el rendimiento.
• SVG y DrawSVG: animación de trazos vectoriales.
• Texto animado: división por caracteres, palabras o líneas, con efectos de máscara, flip tipo panel de aeropuerto o scramble.

Disparadores combinables

Cada animación puede reaccionar a varios eventos a la vez encadenando disparadores: scroll, hover, clic o gesto, entre otros. Esto permite, por ejemplo, un elemento con parallax al hacer scroll que además reaccione al pasar el ratón por encima, sin instalar librerías adicionales ni escribir lógica extra.

Compatibilidad con constructores de páginas y otras plataformas

Motion.page está pensado para convivir con lo que ya tienes montado. Funciona con Elementor, Oxygen y Bricks dentro del ecosistema WordPress, y el mismo motor es compatible con Webflow, Shopify, HTML plano y frameworks como React, Vue o Astro, ya que todo se apoya en un SDK independiente que puede integrarse en cualquier proyecto.

De la interfaz visual al código final

Una vez que la animación queda como la quieres, puedes publicarla en una CDN y pegar una única línea de script en tu sitio, o descargar el paquete completo (SDK más tus animaciones) para alojarlo tú mismo. En ambos casos el código resultante es el mismo que escribiría un desarrollador familiarizado con animación web, tipado y sin dependencias sueltas.

Preguntas frecuentes

¿Necesito saber programar para usar Motion.page?
No. El flujo de trabajo es visual: seleccionas el elemento, eliges el disparador y ajustas el tiempo con controles gráficos. El código se genera solo.

¿Funciona con cualquier tema o constructor de páginas?
Se integra de forma nativa con Elementor, Oxygen y Bricks, y al basarse en un SDK independiente puede funcionar sobre prácticamente cualquier maquetación HTML, incluidos temas personalizados.

¿Puedo animar muchos elementos a la vez sin que el sitio se ralentice?
Sí, los efectos de stagger están diseñados para animar grandes cantidades de elementos en cascada manteniendo la fluidez.

¿El código generado depende de librerías externas como GSAP?
No. Motion.page genera código basado en su propio SDK, sin dependencias, pensado como alternativa a combinaciones habituales como GSAP con Framer Motion.

¿Puedo combinar varios tipos de animación en un mismo elemento?
Sí, los disparadores son encadenables, por lo que un mismo elemento puede reaccionar al scroll, al hover y a otros eventos simultáneamente.