Cómo agregar una animación de Rive a Wix Studio

¿Wix Studio tiene un elemento Rive integrado?

Sí. Wix Studio agregó una integración con Rive, y su centro de ayuda documenta un elemento Rive en el Studio Editor. Si un tutorial te dice que Wix Studio necesita un embed HTML para cada archivo de Rive, es anterior a ese elemento.

1. Haz clic en Add Elements a la izquierda del editor.
2. Haz clic en Media, luego en Rive y después en el ícono Add to Site junto a Rive Animations.
3. Haz clic en Change File y elige un .riv del Media Manager, o sube uno con + Upload Media.
4. Haz clic en Add to Page.

Subir primero el .riv al Media Manager es opcional; puedes subirlo durante la configuración. El archivo debe ser un .riv exportado desde Rive, no el archivo de proyecto .rev del editor ni un JSON de Lottie. Puedes colocar varios elementos Rive en una misma página.

El elemento queda contenido en su recuadro, así que cámbiale el tamaño con los controladores y la animación se escala dentro. Según el propio tutorial de Wix, la vista previa del editor solo muestra animaciones en loop o de entrada, así que revisa las reacciones en el sitio publicado.

¿Qué artboard y qué máquina de estados debo elegir?

Selecciona el elemento y abre Settings. Wix muestra estas opciones:

Como nada en Wix establece un input, elige la máquina de estados que se vea bien con sus valores iniciales. Un archivo controlado por un número y triggers simplemente se queda en su primer estado.

Un archivo de Charmotion muestra la elección con claridad. Contiene tres máquinas de estados: CharacterStateMachine (el input clásico mood más triggers), CharacterViewModelMachine (los mismos estados a través de un view model Character para Data Binding) y LaunchStateMachine (una intro de unos 2.6 segundos que termina en la pose de reposo y no dispara ningún evento de fin). En el elemento nativo, elige CharacterStateMachine para un personaje en loop en reposo (idle), ya que su mood empieza en 0 (idle), o LaunchStateMachine para una intro que se reproduce una sola vez. Wix no documenta si el elemento vincula view models, así que prueba CharacterViewModelMachine en una vista previa publicada antes de depender de ella.

¿Las interacciones de Wix pueden cambiar el estado de ánimo sin código?

No. Las interacciones de Wix Studio (entrada, loop, hover, clic, scroll) animan los elementos como cajas: hacen aparecer, mueven o escalan el elemento Rive completo. No acceden al interior del archivo para establecer un número ni disparar un trigger.

Lo que sí funciona sin código es la interactividad integrada en el propio .riv. Los listeners de Rive reaccionan al movimiento del puntero y a los clics sobre el lienzo, y el tutorial de Wix muestra un archivo en el que unos puntos siguen al mouse y al hacer clic en un interruptor cambia el fondo. Si quieres reacciones al hover o al clic sin código, agrégalas en el editor de Rive como listeners sobre el arte y luego sube el archivo nuevo.

Hay dos cosas que influyen en esto en los teléfonos. Con Enable touch scroll activado, arrastrar sobre el elemento hace scroll en la página; desactívalo solo si el archivo necesita gestos de arrastre. Y mantén grandes las zonas táctiles, porque en un teléfono es fácil no atinarle a un personaje pequeño.

Todo lo que dependa del resto de la página, como celebrar después de enviar un formulario o pasar a una pose pensativa mientras carga una reserva, necesita código.

¿Necesito Velo para establecer inputs o usar Data Binding?

Sí, y no a través del elemento Rive. A octubre de 2026, la referencia de la API $w de Velo incluye elementos como Lottie y HtmlComponent, pero ningún elemento Rive, así que no hay una forma documentada de establecer un input de Rive o una propiedad de view model desde el código de la página. La vía que funciona es ejecutar tú mismo el runtime web de Rive dentro de un elemento HTML iFrame y enviarle mensajes.

Agrega el elemento HTML iFrame, elige la opción de código y pega un canvas junto con el runtime. La documentación de embeds de Wix indica que solo se muestran código y URL con HTTPS, así que aloja el .riv en un CDN con HTTPS que permita solicitudes de origen cruzado:

<style>html, body { margin: 0; height: 100%; }</style>
<canvas id="mascot" style="width: 100%; height: 100%"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
  // Page code sends { mood: 3 } or { trigger: "success" }.
  window.addEventListener("message", (event) => {
    const vmi = r.viewModelInstance;
    const msg = event.data || {};
    if (!vmi) return;
    if (typeof msg.mood === "number") vmi.number("mood").value = msg.mood;
    if (typeof msg.trigger === "string") vmi.trigger(msg.trigger)?.trigger();
  });
</script>

Luego envía mensajes desde el código de la página. Wix documenta postMessage() en el elemento HTML para enviar mensajes de la página al embed, que los recibe con un listener de message:

// Page code. #mascotEmbed is the HTML iFrame element's ID.
$w.onReady(() => {
  $w("#helpButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ mood: 3 });          // thinking
  });
  $w("#joinButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ trigger: "success" });
  });
});

El embed se ejecuta en un iframe, así que no puede leer directamente otros elementos de la página; los mensajes hacen de puente. Si también envías mensajes desde el embed hacia la página, Wix indica que pases la URL de tu sitio como origen de destino en lugar de "*".

¿Cómo agrego Rive en el Wix Editor clásico?

El artículo de Wix sobre Rive está escrito para el Studio Editor, y no encontramos ningún elemento Rive documentado para el Wix Editor clásico. Ahí usa un embed HTML:

1. Haz clic en Add Elements, luego en Embed Code y después en Popular Embeds.
2. Elige Embed HTML y agrégalo a la página.
3. Haz clic en el embed, luego en Enter Code, pega el fragmento de la sección anterior en Add your code here y haz clic en Apply.

Wix señala que el elemento HTML es un iframe, así que su contenido no es responsive, y los tamaños fijos en píxeles pueden recortarlo. Por eso el fragmento ajusta el canvas al 100% de ancho y alto, y te permite cambiar el tamaño del elemento en cada pantalla. El mismo puente con postMessage funciona con el código de página de Velo.

Si no necesitas reacciones, un MP4 en loop y sin sonido en un elemento de video es más sencillo y funciona en ambos editores.

¿El fondo será transparente y cómo manejo los breakpoints?

El elemento dibuja el artboard tal como se diseñó. Si el artboard tiene un relleno de fondo, verás ese relleno; si no lo tiene, se ve la sección que está detrás. Por esa razón, el propio tutorial de Wix elige un artboard claro en lugar de uno con fondo negro. Quita el relleno del artboard en Rive, o elige un artboard sin relleno, cuando el personaje deba quedar sobre el color de tu página.

En cuanto a los breakpoints, Wix indica que los ajustes de Rive se aplican a todos los breakpoints de forma predeterminada. Usa Responsive behavior en el panel Inspector para que el elemento se escale con su contenedor, y deja que Fit y Alignment mantengan visible al personaje. Si el archivo usa layouts de Rive, configura Fit en Layout y sus opciones de layout se conservan.

La lista de configuración de Wix no incluye una opción de movimiento reducido. Para un hero grande en loop, mantén un movimiento tranquilo o usa la vía del embed, donde el snippet comprueba prefers-reduced-motion y omite la reproducción automática.

Agrega una animación de Rive a Wix Studio

1. Agrega el elemento. En el Studio Editor, haz clic en Add Elements, luego en Media y luego en Rive, y agrega Rive Animations a la página.
2. Sube el archivo. Haz clic en Change File y elige o sube tu .riv en el Media Manager; después haz clic en Add to Page.
3. Elige el artboard y la máquina de estados. Abre Settings y elige el artboard y una máquina de estados (state machine) que se vea bien con sus valores iniciales.
4. Configura la reproducción. Configura Fit, Alignment, Autoplay y Enable touch scroll, y dale al elemento un nombre accesible o márcalo como decorativo.
5. Hazlo responsive. Configura Responsive behavior en el Inspector y revisa cada breakpoint.
6. Agrega código solo si lo necesitas. Para estados de ánimo que dependen de eventos de la página, usa un elemento HTML iFrame con el runtime web de Rive y envíale mensajes con postMessage desde el código de la página.

Preguntas frecuentes

¿Puedo subir un archivo .riv al Media Manager de Wix?

Sí. En el elemento de Rive, haz clic en Change File y elige un .riv que ya esté en el Media Manager o sube uno con + Upload Media. Wix pide un .riv exportado correctamente desde Rive, así que expórtalo desde el editor de Rive en lugar de subir el archivo del proyecto.

¿Por qué mi elemento de Rive en Wix Studio muestra la animación equivocada?

La lista de comprobación de Wix incluye el artboard, la máquina de estados y el tamaño del elemento. Un archivo puede contener varios artboards y máquinas de estados, y el elemento reproduce los que están seleccionados en Settings. Si son correctos y sigue fallando, vuelve a exportar el .riv desde Rive por si el archivo está dañado.

¿Un elemento de Rive hace más lenta la página en Wix?

Agrega a la página el runtime de Rive y tu archivo .riv, que normalmente pesa mucho menos que un video equivalente. Mantén moderada la cantidad de elementos animados por página, usa un archivo liviano y evita que lo primero que los visitantes tengan que esperar sea una animación grande.

Respuestas rápidas de esta guía

• ¿Wix es compatible con animaciones de Rive?
• ¿Wix Velo puede cambiar el estado de una animación de Rive?

Fuentes

• Studio Editor: Adding and setting up a Rive animation, Wix Help Center
• How to add Rive animations to Wix Studio, Wix Studio Academy
• Wix Studio x Rive, Wix Studio
• $w: Introduction, Wix Developers
• Messaging between a site page and an HTML element, Wix Developers
• Wix Editor: Embedding a site or a widget, Wix Help Center
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive