Rive y Lottie en Bubble, Wix Studio y Webflow

¿Qué plataformas no-code son compatibles con Rive de forma nativa?

Entre las plataformas populares, Webflow y Wix Studio tienen soporte propio para Rive; Rive anunció el soporte nativo en Webflow en su blog. Framer admite Rive mediante un plugin del marketplace. Wix Studio agregó un elemento nativo de Rive (sube el .riv y elige el artboard y la máquina de estados). Bubble no tiene un elemento nativo de Rive, pero puede ejecutar el runtime web de Rive mediante un embed HTML. Para ver el proceso completo en Wix, consulta cómo agregar una animación de Rive a Wix Studio.

Webflow y Framer tienen sus propias guías: Webflow y Framer. FlutterFlow se explica en la guía de FlutterFlow. Esta página se centra en Wix Studio y Bubble.

¿Cómo agrego una animación de Lottie en Wix Studio?

Wix Studio tiene un elemento nativo de animación Lottie. Agrégalo desde el panel Agregar elementos y luego pega la URL de la animación. El centro de ayuda de Wix indica que solo admite URLs de Lottie en formato JSON, así que sube el archivo a LottieFiles (u otro servicio que te dé una URL JSON) y copia ese enlace. Un archivo .lottie (dotLottie) no funciona en este elemento.

La configuración del elemento controla la reproducción, por ejemplo el loop y el momento en que empieza. Ajusta su tamaño en el editor como cualquier otro elemento y revisa por separado el breakpoint móvil para que la animación no amontone el texto en pantallas pequeñas.

Lottie es la opción correcta en Wix para un loop decorativo: una sección hero ilustrada, un separador de secciones, un ícono que se anima al cargar. Para un personaje que reacciona a los visitantes, por ejemplo saludando al llegar y celebrando después de enviar un formulario, necesitas la máquina de estados de Rive, y eso implica un embed.

¿Cuándo sigo necesitando el elemento HTML iFrame para Rive en Wix?

El elemento nativo de Rive de Wix Studio reproduce por sí solo la máquina de estados elegida, lo que cubre un loop en reposo (idle) o una animación que reacciona a clics en el canvas. Cuando otros eventos de la página (el envío de un formulario, una posición de scroll) deben cambiar la animación, usa en su lugar el elemento HTML iFrame (Embed): elige la opción de código y pega un canvas junto con el runtime web de Rive. Wix exige HTTPS para el código insertado, así que aloja el .riv en un servicio de almacenamiento o CDN que sirva por HTTPS y permita solicitudes de origen cruzado.

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.44.2"></script>
<script>
  const r = new rive.Rive({
    src: "https://cdn.example.com/character.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
    onLoad: () => {
      r.resizeDrawingSurfaceToCanvas();
      r.viewModelInstance.number("mood").value = 2; // wave
    },
  });
</script>

Fija la versión del runtime, como se mostró arriba, en lugar de cargar la última versión, para que una actualización no cambie tu sitio sin aviso. Ajusta el tamaño del elemento HTML al del canvas, o el personaje se verá recortado.

El embed se ejecuta en un iframe aislado (sandbox), así que el código que contiene no puede leer ni modificar otros elementos de la página de Wix, y Wix advierte que los widgets que dependen de eso no funcionarán. Los clics en el propio canvas funcionan con normalidad; agrega un listener que dispare un trigger, como r.viewModelInstance.trigger("yes").trigger(). Para reaccionar a eventos en otras partes de la página, como el envío de un formulario, la plataforma de desarrollo Velo de Wix puede enviar mensajes a un elemento HTML con postMessage, y un listener de message dentro del embed puede asignar el estado de ánimo.

¿El plugin de Rive para Bubble sigue teniendo mantenimiento?

Parece que no. Rive anunció un plugin para Bubble en el foro de Bubble el 31 de agosto de 2021. Para octubre de 2023, usuarios en el mismo hilo preguntaban si seguía teniendo mantenimiento, y un moderador señaló que el desarrollador no se había visto en el foro desde hacía más de dos años. Es anterior por completo a la función Data Binding de Rive.

Una opción más confiable es el elemento HTML de Bubble, que renderiza HTML y scripts personalizados en la página. Pega el mismo canvas y el mismo script que se muestran en la sección de Wix, con el .riv alojado en HTTPS. Como el elemento está directamente en la página y no dentro de un iframe, también puedes llamar al runtime desde los workflows de Bubble mediante un plugin que ejecute JavaScript, como Toolbox. Guarda la instancia en window (por ejemplo window.mascot = r) y ejecuta window.mascot.viewModelInstance.number("mood").value = 5 cuando empiece un workflow.

Si el elemento HTML aparece dentro de un repeating group o de un elemento reutilizable, asigna a cada canvas un id único para que varias instancias no compitan por el mismo elemento.

¿Cómo uso el plugin de LottieFiles para Bubble?

LottieFiles publica un plugin oficial para Bubble, anunciado en el blog de Bubble en febrero de 2023. Instálalo desde el marketplace de plugins, arrastra su elemento a la página y pega la URL JSON de la animación Lottie. Según Bubble, configurarlo es tan fácil como copiar y pegar esa URL.

El plugin cubre los usos habituales de Lottie: un loader mientras se ejecuta un workflow, una animación de éxito después de un pago o un estado vacío ilustrado. Muestra y oculta el elemento con los condicionales de Bubble, por ejemplo, visible solo mientras un custom state como is_loading sea "yes" (sí).

La limitación de Lottie es la misma en todas partes: un archivo reproduce una sola secuencia. Si tu mascota de marca necesita saludar, esperar y celebrar, tendrás que apilar varios elementos de Lottie y alternar su visibilidad, o cambiar a un solo archivo de Rive en un elemento HTML.

¿Cuándo conviene exportar MP4, GIF o WebM?

Usa video cuando la animación no necesite reaccionar. Cualquier plataforma puede reproducir un MP4 sin sonido y en loop sin plugins ni código, y un WebM con fondo transparente (más un .mov HEVC con canal alfa para Safari) puede colocarse sobre un fondo de color. El GIF funciona casi en todas partes, incluido el correo electrónico, pero pesa más y está limitado a 256 colores con transparencia de bordes duros.

• Video: loops de sección hero, demos de producto, un personaje que reproduce un clip fijo.
• Lottie: loops vectoriales nítidos cuando importa el peso del archivo.
• Rive: un personaje que cambia de estado según las acciones del visitante.

Charmotion exporta video, GIF y Rive desde una sola subida (no exporta Lottie): 17 animaciones de tu personaje o logo en pocos minutos, como un solo .riv con un view model Character (un número mood de 0 a 9 y los triggers success, error, yes, no, enter y exit) más un index.html listo con Data Binding. MP4, MP4 9:16, GIF y WebM y MOV transparentes se exportan bajo demanda, en alrededor de un minuto. El .riv, los WebM y MOV transparentes y el código requieren un plan de pago (desde $20 al mes).

La guía de video con fondo transparente explica los detalles de Safari.

Cómo agregar un personaje de Rive a Wix Studio o Bubble

1. Aloja el archivo. Sube el .riv a un servicio de almacenamiento o CDN que sirva por HTTPS con acceso de origen cruzado.
2. Agrega un embed. Agrega el elemento HTML iFrame de Wix Studio o el elemento HTML de Bubble.
3. Pega el fragmento de código. Pega un canvas y el script de @rive-app/canvas con versión fijada, con stateMachine: "CharacterViewModelMachine" y autoBind: true.
4. Ajusta el tamaño del elemento. Haz que el tamaño del embed coincida con el del canvas en cada breakpoint.
5. Conecta los eventos. Dispara triggers con clics en el canvas o envía mensajes desde flujos de trabajo de Velo o Bubble para definir el estado de ánimo.
6. Agrega un respaldo. Usa una imagen de póster o un MP4 sin sonido donde no se permitan scripts.

Preguntas frecuentes

¿Wix Studio puede reproducir archivos .lottie?

No en su elemento nativo. El centro de ayuda de Wix indica que el elemento Lottie solo admite URL de Lottie en formato JSON. Sube o convierte la animación a Lottie JSON, copia su URL desde LottieFiles u otro hosting y pégala en el elemento. Para un archivo .lottie, usa en su lugar un embed HTML con un reproductor de dotLottie.

¿Por qué no carga mi embed de Rive en Wix?

Revisa tres cosas: que la URL del .riv use HTTPS, que el hosting permita solicitudes de origen cruzado desde el embed y que el elemento HTML sea lo bastante grande para mostrar el canvas. Abre la consola del navegador en el sitio publicado, ya que los errores dentro del iframe aparecen ahí y suelen indicar qué solicitud falla.

¿Un embed de Rive perjudica el SEO?

No por sí mismo. Los buscadores indexan el texto y los encabezados de tu página, no los píxeles del canvas, así que mantén las palabras importantes en texto real junto a la animación. Dale al canvas un aria-label, define su tamaño para evitar el layout shift (salto de diseño) y evita que una animación pesada sea lo primero que deba cargar.

Respuestas rápidas de esta guía

• ¿Cómo agrego Rive a un sitio de Wix?
• ¿Existe un plugin de Rive para Bubble?

Fuentes

• Studio Editor: Adding and setting up a Rive animation, Wix Help Center
• Studio Editor: Adding and customizing Lottie animation files, Wix Help Center
• Studio Editor: Adding an HTML iFrame element, Wix Help Center
• Rive: interactive animations for Bubble, Bubble Forum
• LottieFiles Bubble plugin, Bubble
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive