Cómo agregar una animación de Rive a Bubble sin el plugin antiguo

¿Debo usar el plugin de Rive para Bubble o el elemento HTML?

Usa el elemento HTML. Rive anunció un plugin para Bubble en el foro de Bubble el 31 de agosto de 2021. En ese mismo hilo, varios usuarios contaron en 2021 y 2022 que no lograban hacerlo funcionar, y en octubre de 2023 alguien preguntó si seguía teniendo soporte; un usuario habitual del foro respondió que el autor original no aparecía por el foro desde hacía más de dos años. Nadie del lado del plugin respondió. Además, el plugin es anterior al Data Binding de Rive, que es la forma en que los archivos de personaje actuales exponen sus controles.

El elemento HTML no tiene ninguno de esos problemas. El manual de Bubble lo describe como un elemento que "ejecuta HTML en la página", con dos detalles que importan aquí:

• Los scripts solo se ejecutan en modo de ejecución. "Si el HTML contiene etiquetas script, estas solo se ejecutarán en run mode y no en el editor." Prueba en la vista previa.
• Los datos dinámicos funcionan dentro de él. Puedes insertar entradas dinámicas en el HTML, así que la URL del .riv puede venir de un campo de la base de datos.

Como tú escribes el script, eliges y fijas la versión del runtime de Rive por tu cuenta, en lugar de depender de la que haya incluido un plugin. Para comparar Bubble, Wix Studio y Webflow lado a lado, consulta Rive y Lottie en builders no-code.

¿Cómo alojo el archivo .riv en Bubble?

Súbelo en el administrador de archivos de la pestaña Data, como describen los usuarios del foro para el plugin, y copia la URL del archivo. Los enlaces de archivos de Bubble suelen ser relativos al protocolo (empiezan con //); antepón https: antes de usar uno en un script.

El runtime descarga el .riv con una solicitud de origen cruzado, porque el dominio de tu app y la CDN de archivos de Bubble son hosts distintos. Eso solo funciona si la CDN envía encabezados CORS. Cuando revisamos archivos en la CDN de Bubble el 25 de octubre de 2026, las respuestas incluían access-control-allow-origin: *. Comprueba tu propio archivo de la misma forma:

curl -sI -H "Origin: https://yourapp.bubbleapps.io" \
  "https://YOUR-APP.cdn.bubble.io/f1234/character.riv" | grep -i access-control

Si falta el encabezado, aloja el .riv en un bucket de almacenamiento o una CDN donde controles CORS, y mantén HTTPS. Conviene conocer dos opciones más:

• Archivos por usuario o por cliente. Guarda el .riv en un campo de archivo e insértalo en el src con los datos dinámicos de Bubble, para que cada espacio de trabajo muestre su propia mascota.
• El archivo WASM. El runtime también descarga rive.wasm, desde unpkg de forma predeterminada. Si necesitas alojarlo tú mismo, Rive documenta RuntimeLoader.setWasmUrl(), y la versión del WASM debe coincidir con la del runtime.

¿Cómo inserto el canvas de Rive en un elemento HTML de Bubble?

Agrega un elemento HTML, deja sin marcar Display as an iFrame y pega el fragmento de abajo. Con la opción de iframe desactivada, el código se ejecuta en la propia página, y eso es lo que permite que los flujos de trabajo lleguen a la animación más adelante.

<div style="width: 100%; aspect-ratio: 1 / 1">
  <canvas id="mascot" style="width: 100%; height: 100%"
          role="img" aria-label="Animated mascot"></canvas>
</div>
<script>
(function () {
  function start() {
    if (window.mascot) window.mascot.cleanup();   // HTML element re-rendered
    var reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
    var r = new rive.Rive({
      src: "https://YOUR-APP.cdn.bubble.io/f1234/character.riv",
      canvas: document.getElementById("mascot"),
      stateMachine: "CharacterViewModelMachine",
      autoplay: !reduce,
      autoBind: true,
      onLoad: function () {
        r.resizeDrawingSurfaceToCanvas();
        window.mascot = r;
      },
    });
  }
  if (window.rive) return start();
  var s = document.createElement("script");
  s.src = "https://unpkg.com/@rive-app/canvas@2.47.1";
  s.onload = start;               // wait for the runtime before using it
  document.head.appendChild(s);
  window.addEventListener("resize", function () {
    if (window.mascot) window.mascot.resizeDrawingSurfaceToCanvas();
  });
})();
</script>

Por qué está escrito así:

• El runtime se carga con un callback onload. Usuarios del foro de Bubble han informado que una biblioteca cargada con una etiqueta script en un elemento HTML todavía no estaba definida cuando se ejecutaba el siguiente script en línea. Crear el elemento script e iniciar Rive en onload evita esa condición de carrera.
• cleanup() antes de volver a crear. Si Bubble vuelve a renderizar el elemento, por ejemplo cuando un grupo oculto se muestra de nuevo, la instancia anterior se libera antes de que arranque una nueva.
• stateMachine y autoBind: true. Sin un nombre de máquina de estados (state machine), el runtime reproduce la primera línea de tiempo que encuentra e ignora los inputs; autoBind vincula el view model predeterminado del archivo para que puedas definir propiedades.
• Movimiento reducido. Si el visitante pide menos movimiento, el archivo se carga sin reproducción automática.

Reemplaza CharacterViewModelMachine por el nombre de la máquina de estados de tu archivo si es distinto. Fija la versión del runtime, como arriba, para que una nueva versión publicada no cambie tu app sin aviso.

¿Cómo cambio la animación desde un flujo de trabajo de Bubble?

Instala el plugin Toolbox y usa su acción Run javascript. Como el fragmento guarda la instancia como window.mascot, cualquier paso de un flujo de trabajo puede definir una propiedad del view model o disparar un trigger:

// Toolbox "Run javascript" action, step 1 of "Button Save is clicked"
if (window.mascot) window.mascot.viewModelInstance.number("mood").value = 5; // loading

// ...your Bubble steps: Make changes to a thing, API call...

// last step: celebrate, then back to idle
if (window.mascot) {
  var vm = window.mascot.viewModelInstance;
  vm.trigger("success").trigger();
  vm.number("mood").value = 0;
}

Un patrón que funciona bien en la mayoría de las apps:

• Antes de los pasos lentos (llamadas a API, cargas de archivos, flujos de trabajo de backend), activa el estado de ánimo loading.
• Tras un éxito, dispara una reacción puntual y vuelve a reposo (idle).
• Ante un fallo, usa el evento de error de la página en Bubble para disparar error y cambiar a un estado de ánimo sad o attention.

Para ir en sentido contrario, de la animación a Bubble, Toolbox tiene un elemento Javascript to Bubble que expone una función llamada bubble_fn_ más tu sufijo. Llámala desde onLoad, por ejemplo para definir un custom state que oculte una imagen provisional cuando la mascota esté lista.

Si tu archivo usa el sistema de inputs anterior en lugar de Data Binding, define los inputs con r.stateMachineInputs("YourStateMachine"); la guía de la máquina de estados explica la diferencia.

¿Puede una mascota de marca de Rive ser la pantalla de carga de una app de Bubble?

Funciona mejor para cargas dentro de la app, no para el primer renderizado. El rive.js del paquete canvas pesa unos 628 KB y rive.wasm unos 2.2 MB sin comprimir (versión 2.47.1 en npm), y ambos tienen que llegar antes del primer fotograma. Los propios recursos de la página de Bubble se cargan al mismo tiempo, así que un loader de Rive rara vez aparece antes de que la página esté casi lista.

Lo que sí funciona:

1. Muestra una imagen estática (póster) del personaje en el mismo lugar mientras carga la página.
2. Cambia al canvas de Rive cuando se dispare onLoad (el elemento Javascript to Bubble de Toolbox puede cambiar un custom state).
3. Usa el estado de ánimo loading para las esperas que ocurren cuando la página ya está lista: búsquedas, pagos, llamadas a IA, cargas de archivos.

Mantén los loops tranquilos y cortos para que las esperas largas no se sientan más largas; la guía de animaciones de carga explica los tiempos.

¿Cómo mantengo el canvas nítido y responsive en Bubble?

Un canvas tiene dos tamaños: su tamaño CSS en la página y su búfer de dibujo. Si no coinciden, la animación se ve borrosa o aplastada. El fragmento define el tamaño CSS (todo el ancho del elemento, relación de aspecto cuadrada) y llama a resizeDrawingSurfaceToCanvas() después de cargar y en cada cambio de tamaño de la ventana, lo que ajusta el búfer al tamaño mostrado y a la densidad de la pantalla.

• En la configuración responsive de Bubble, dale al elemento HTML un ancho mínimo y uno máximo en lugar de un tamaño fijo en píxeles, y deja que el aspect-ratio del contenedor defina la altura.
• Stretch to fit content permite que el elemento crezca con su contenido cuando no está en modo iframe; úsalo si el canvas se recorta.
• Repeating groups: cada celda necesita un id de canvas único, por ejemplo insertando el índice de la celda con datos dinámicos. Muchos canvas activos en una misma lista resultan pesados; para listas largas, usa un GIF o un póster por celda y deja un solo personaje de Rive en otra parte de la página.

¿Dónde consigo un .riv listo para Bubble?

Charmotion convierte una imagen de un personaje, una mascota de marca o un logo en 17 animaciones: un .riv con un view model Character en CharacterViewModelMachine (un número mood más los triggers success, error, yes, no, enter y exit), los inputs clásicos de CharacterStateMachine y una intro de inicio corta. El mismo set incluye MP4, video 9:16, GIF, WebM con fondo transparente y MOV HEVC, además de código web, React y SwiftUI. Los fragmentos de esta página usan sus nombres tal cual.

El .riv y el video transparente vienen con todos los planes de pago (desde $20/mes), junto con MP4, GIF y el video de inicio 9:16 (fondo sólido), que también funcionan en Bubble mediante una etiqueta de video simple cuando no se necesita un personaje que reaccione.

Cómo agregar una animación de Rive a una app de Bubble

1. Sube el archivo. Sube el .riv en el administrador de archivos de la pestaña Data y copia su URL; agrega https: si empieza con //.
2. Revisa CORS. Ejecuta curl con un header Origin y confirma que la respuesta incluye un header access-control-allow-origin.
3. Agrega un elemento HTML. Coloca un elemento HTML, deja sin marcar Display as an iFrame y pega el fragmento del canvas y del cargador.
4. Vista previa. Abre la app en vista previa, porque Bubble ejecuta el script solo en modo de ejecución (run mode).
5. Instala Toolbox. Agrega el plugin Toolbox y usa pasos Run javascript para establecer el mood de window.mascot y disparar triggers.
6. Hazlo responsive. Define un ancho mínimo y uno máximo, conserva el contenedor cuadrado y redimensiona la superficie de dibujo cuando cambie el tamaño de la ventana.

Preguntas frecuentes

¿Por qué mi canvas de Rive aparece en blanco en el editor de Bubble?

El manual de Bubble indica que las etiquetas script dentro de un elemento HTML solo se ejecutan en modo de ejecución (run mode), no en el editor. Que el recuadro aparezca vacío es lo esperado. Abre la vista previa para ver la animación y, si aun así no aparece, usa allí la consola del navegador: verás listada una solicitud fallida del .riv o un error de script.

¿Activar Display as an iFrame impide que los workflows controlen la animación?

Sí, en la práctica. Con esa opción activada, Bubble ejecuta el HTML como una página independiente, así que window.mascot existe dentro del iframe mientras que la acción Run javascript de Toolbox se ejecuta en la página principal. Deja la opción desactivada si quieres controlar el personaje desde workflows.

¿Por qué mi animación de Rive se ve borrosa en Bubble?

El búfer de dibujo del canvas no coincide con su tamaño en pantalla. Llama a resizeDrawingSurfaceToCanvas() en onLoad y de nuevo cuando cambie el tamaño de la ventana, y define el tamaño del canvas con CSS en lugar de usar atributos width y height fijos que difieran del tamaño del elemento.

¿Cada usuario de Bubble puede ver una mascota distinta?

Sí. Guarda un .riv por usuario, equipo o espacio de trabajo en un campo de archivo y luego inserta ese campo en el src del fragmento con los datos dinámicos del elemento HTML. Mantén idénticos los nombres de la máquina de estados y de las propiedades en todos los archivos para que los mismos workflows controlen cada versión.

Respuestas rápidas de esta guía

• ¿Por qué mi animación de Rive no aparece en el editor de Bubble?
• ¿Cómo disparo una animación de Rive desde un workflow de Bubble?

Fuentes

• Visual elements: HTML element, Bubble Manual
• Rive: interactive animations for Bubble, Bubble Forum
• Scripts not loaded synchronously?, Bubble Forum
• Toolbox plugin documentation (Run Javascript, Javascript to Bubble), Toolbox docs
• Web (JS) runtime, Rive
• Rive parameters (web runtime), Rive
• Web runtime: Data binding, Rive
• Preloading WASM, Rive