Cómo agregar animaciones de Rive, Lottie y video a Webflow

¿Webflow es compatible con Rive de forma nativa?

Sí. Rive y Webflow anunciaron la compatibilidad nativa el 18 de septiembre de 2024. En palabras de Rive, puedes "arrastrar y soltar los gráficos de Rive, listos para producción, en tu proyecto de Webflow y conectarlos a las interacciones de Webflow". El elemento ofrece ajustes de diseño, reproducción automática y scroll táctil, además de manejo de eventos.

Eso coloca a Webflow entre los creadores no-code con compatibilidad nativa con Rive, junto con el elemento Rive de Wix Studio. No necesitas un embed, una etiqueta script ni una biblioteca de terceros para mostrar un archivo .riv, y la máquina de estados del archivo sigue funcionando: un personaje puede quedarse en reposo por sí solo, reaccionar a un hover y reproducir una reacción al hacer clic.

Lo que la compatibilidad nativa no te da es lógica de aplicación arbitraria. Las interacciones responden a eventos de la página (hover, clic, scroll, carga de la página). Si quieres que el personaje cambie a un estado de carga mientras se envía un formulario y que celebre cuando el envío sale bien, necesitas unas pocas líneas de código personalizado, que se explican en la última sección.

Los archivos de Rive suelen ser ligeros, lo que los hace ideales para una sección hero. Un personaje plano con muchos estados en un solo archivo suele pesar unas decenas de kilobytes, menos que un solo video corto. Lo que más pesa es el runtime, así que usa Rive en las páginas que lo necesiten y no en todas.

¿Cómo se agrega un archivo .riv en Webflow?

El flujo de trabajo que describe Rive tiene cuatro pasos:

1. Sube el archivo .riv al panel Assets.
2. Arrástralo al lienzo o al Navigator. También puedes insertarlo desde el panel Add, en Media.
3. Configúralo en los ajustes del elemento: elige el artboard y la máquina de estados, y define el ajuste (fit) y la reproducción automática.
4. Conecta la máquina de estados a Interactions.

Elegir la máquina de estados es importante. Si no la defines, el archivo reproduce su animación predeterminada e ignora los inputs. Un archivo de personaje típico expone una máquina de estados (state machine) como CharacterStateMachine, con un número mood (0 idle, 1 happy, 2 wave, 3 thinking, 4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) y triggers como success, yes y no. Un archivo puede contener varias máquinas de estados, por ejemplo una aparte que reproduce una intro una vez y luego queda en reposo.

Dale al elemento una relación de aspecto fija, por ejemplo una caja cuadrada para un artboard cuadrado, y define el ajuste como contain para que el personaje nunca quede recortado en los breakpoints más pequeños.

¿Cómo se controla una animación de Rive con Webflow Interactions?

Crea una interacción en el elemento que debe provocar el cambio, como el clic en un botón, una sección que entra en pantalla al hacer scroll o un hover sobre una tarjeta. En las acciones de la interacción, apunta al elemento Rive y define un input de la máquina de estados: cambia un número, alterna un booleano o dispara un trigger.

Algunos patrones útiles con un personaje basado en estados de ánimo:

• Hover sobre una tarjeta de precios: define mood en 1 (happy); al quitar el hover, vuelve a ponerlo en 0.
• Clic en una llamada a la acción: dispara yes para un breve asentimiento antes de que se abra el enlace.
• Scroll hasta las preguntas frecuentes: define mood en 3 (thinking).
• Carga de la página: dispara enter para que el personaje haga su entrada en lugar de aparecer de golpe.

Mantén los loops tranquilos. Una mascota de marca en un loop constante de attention junto al texto distrae a quien lee, así que reserva los estados de ánimo más enérgicos para momentos breves y vuelve a idle. Consulta la documentación actual de Webflow para saber qué propiedades de Rive puede controlar Interactions, incluida cualquier compatibilidad con Data Binding.

¿Cómo se agrega Lottie o dotLottie en Webflow?

Webflow tiene un elemento específico para animaciones Lottie. Arrástralo desde el panel Add (en Media) al lienzo y selecciona tu archivo Lottie JSON o dotLottie. Igual que el elemento Rive, se puede controlar con Interactions, por ejemplo para reproducirlo una vez al entrar en pantalla o para avanzarlo con el scroll de la página.

Lottie encaja bien con ilustraciones que se reproducen de principio a fin: una escena hero, una secuencia de íconos, un diagrama vinculado al scroll. Los archivos dotLottie están comprimidos, así que prefiérelos frente al JSON sin comprimir cuando tu herramienta exporte ambos.

Elige Rive en lugar de Lottie cuando la animación necesite varios estados y reacciones dentro de un mismo archivo, como una mascota de marca que queda en reposo, saluda con el hover y celebra con un clic. Con Lottie normalmente crearías esas animaciones o segmentos por separado y tendrías que alternar entre ellos tú mismo. La guía Rive vs Lottie compara ambos en detalle.

¿Cuándo conviene usar un video de fondo?

Usa video para grabaciones y para clips fijos que nunca necesitan reaccionar: una demo de producto, una animación de marca en loop, un montaje. El elemento Background Video de Webflow se reproduce automáticamente sin sonido y en loop, lo que encaja bien en secciones hero.

El video tiene dos limitaciones para los personajes:

• No tiene estados. Un video reproduce una sola secuencia. Se puede alternar entre varios clips según eventos con código, pero cada clip es una descarga aparte.
• La transparencia es complicada. Los navegadores no coinciden en los formatos transparentes: Chrome, Edge y Firefox muestran WebM VP9 con alfa, mientras que Safari necesita HEVC con alfa en un .mov. Un único archivo subido no será transparente en todas partes. Para superponer un personaje sobre tu diseño con video, usa un embed de código personalizado con ambas fuentes, como se explica en la guía de video con fondo transparente.

Para un personaje, un archivo .riv suele ser más ligero y más capaz que un video. El gráfico de arriba compara un set real: todas las animaciones en un solo archivo de Rive de 40 KB frente a 208 a 728 KB por cada video de cuatro segundos.

¿Cómo se agrega un personaje con estados de ánimo a una página de Webflow?

Cuando el personaje deba seguir eventos que Interactions no puede detectar, como el envío de un formulario o una solicitud fetch, carga tú mismo el runtime web de Rive. Rive indica que sus runtimes son totalmente compatibles con la función de código personalizado de Webflow. Coloca un elemento Code Embed donde deba aparecer el personaje (la disponibilidad del código personalizado depende de tu plan de Webflow) y aloja el .riv como asset:

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://your-asset-url/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>
<script>
  const form = document.querySelector("form");
  form.addEventListener("submit", () => {
    if (r.viewModelInstance) r.viewModelInstance.number("mood").value = 5; // loading
  });
</script>

Esto usa Data Binding: autoBind: true vincula el view model del archivo, y tú escribes el número mood o llamas a trigger("success").trigger(). Los archivos de Charmotion incluyen CharacterViewModelMachine justo para esto, junto con la máquina basada en inputs para Webflow Interactions nativo, así que el mismo archivo subido funciona en ambos casos. Luego, el estado de éxito del formulario de Webflow puede llamar al trigger success antes de mostrar su mensaje.

Cómo agregar un personaje interactivo de Rive a Webflow

1. Sube el archivo. Agrega el .riv al panel Assets de Webflow.
2. Coloca el elemento. Arrastra el asset al lienzo o al Navigator, o insértalo desde el panel Add, en Media.
3. Elige la máquina de estados (state machine). En los ajustes del elemento, elige el artboard y la máquina de estados, define el ajuste como contain y activa la reproducción automática.
4. Agrega Interactions. Crea interacciones de hover, clic o scroll que definan el número de estado de ánimo o disparen un trigger en el elemento Rive.
5. Agrega código para eventos de la app. Para eventos de formularios o de una API, usa un Code Embed con el runtime web de Rive y define el view model desde tus handlers.

Preguntas frecuentes

¿Necesito código personalizado para usar Rive en Webflow?

No. Desde septiembre de 2024, Rive es un formato nativo de Webflow: sube el .riv, arrástralo al lienzo, elige la máquina de estados y conéctala a Interactions. Solo necesitas código personalizado cuando la animación debe reaccionar a eventos que Interactions no puede detectar, como respuestas de una API.

¿Webflow puede reproducir archivos dotLottie?

Sí. El elemento de animación Lottie de Webflow acepta archivos Lottie JSON y dotLottie, e Interactions puede controlar la reproducción, por ejemplo para reproducirla al entrar en pantalla con el scroll. Prefiere dotLottie cuando tu herramienta de exportación lo ofrezca, porque el formato está comprimido y puede reunir varias animaciones, temas y máquinas de estados en un solo archivo.

¿Por qué mi animación de Rive en Webflow no reacciona a Interactions?

Lo más común es que la máquina de estados no esté seleccionada en la configuración del elemento, así que se reproduce la animación predeterminada y se ignoran los inputs. Revisa también que los nombres y tipos de los inputs en tu interacción coincidan exactamente con los del archivo, incluidas mayúsculas y minúsculas. Por último, confirma que la reproducción automática esté activada, ya que una máquina de estados en pausa no evalúa sus transiciones.

Respuestas rápidas de esta guía

• ¿Webflow es compatible con Rive de forma nativa?

Fuentes

• Rive is natively supported in Webflow, Rive
• Lottie animations, Webflow Help Center
• Web (JS) runtime, Rive
• Data binding on the web, Rive
• Video with alpha transparency on the web, Jake Archibald