Rive vs Motion (Framer Motion): funciones distintas

¿Qué anima realmente cada librería?

Motion anima los elementos que tus componentes ya renderizan. Cambias un div por un motion.div, describes los valores de inicio y fin, y Motion se encarga de lo que hay en medio: fundidos, deslizamientos, springs, gestos como hover y tap, animaciones de salida mediante AnimatePresence y animaciones de layout cuando un elemento cambia de tamaño o posición.

Rive renderiza arte que alguien dibujó y animó en el editor de Rive. El archivo .riv contiene formas vectoriales, huesos, líneas de tiempo y una máquina de estados; tu código lo carga en un canvas y le indica en qué estado debe estar.

Preguntar cuál es mejor es como preguntar si CSS es mejor que una ilustración. Responden a preguntas distintas.

¿Framer Motion ahora se llama Motion?

Sí. El 12 de noviembre de 2024, Framer Motion se convirtió en un proyecto independiente llamado Motion. En proyectos de React, basta con usar el nuevo nombre del paquete: instala motion y reemplaza las importaciones de framer-motion por motion/react.

npm uninstall framer-motion
npm install motion

// before
import { motion } from "framer-motion";
// after
import { motion } from "motion/react";

La guía de actualización de Motion considera que la API de componentes no cambia, así que el código existente con motion.div sigue funcionando tras cambiar la importación. El proyecto también agregó API de JavaScript vanilla, de modo que el mismo motor de animación se puede usar sin React.

Las comparaciones escritas antes del cambio de nombre, incluidos muchos artículos de "Rive vs Framer Motion", siguen siendo válidas. En esta guía, lee "Framer Motion" como "Motion". En comparación, los nombres de Rive son estables: el editor, el formato .riv y los runtimes conservan sus nombres, aunque los paquetes recomendados de los runtimes han cambiado.

¿Cuándo necesitas un recurso creado por un diseñador?

Cuando lo que se mueve no existe como elemento en tu página. Motion solo puede animar lo que renderizas. Un botón, una tarjeta, un modal y un elemento de lista son elementos, así que Motion encaja de forma natural. Una mascota de marca que parpadea, inclina la cabeza y celebra no lo es: es un dibujo con un esqueleto.

Podrías construir un personaje con trazados SVG en línea y animar cada parte con Motion, pero cada keyframe viviría en el código, cada cambio de diseño sería un cambio de código y el arte quedaría atrapado en la web. Ahí es donde un formato de recursos diseñados compensa. En Rive, un animador dibuja el personaje, lo riggea con huesos, crea loops y reacciones en una línea de tiempo y los conecta en una máquina de estados. Los ingenieros reciben un solo archivo y una API pequeña.

Rive ahora recomienda Data Binding con view models para esa API; su documentación marca los inputs de la máquina de estados como heredados, aunque siguen funcionando. Data Binding sincroniza valores en ambos sentidos entre tu app y el archivo, de modo que un número como mood o un trigger como success se convierte en una propiedad tipada que defines desde React.

Regla práctica: si un diseñador te entregaría un archivo, usa Rive (o Lottie). Si describirías el movimiento en un ticket, usa Motion o CSS.

¿Puedes usar Rive y Motion juntos?

Sí, y es un patrón habitual. Motion anima el contenedor y Rive anima el personaje que está dentro. Nunca tocan los mismos píxeles, así que no hay nada que entre en conflicto.

"use client";
import { AnimatePresence, motion } from "motion/react";
import { useRive } from "@rive-app/react-webgl2";

function Mascot() {
  const { RiveComponent } = useRive({
    src: "/mascot.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  return <RiveComponent style={{ width: 160, height: 160 }} />;
}

export function HelpCard({ open }: { open: boolean }) {
  return (
    <AnimatePresence>
      {open && (
        <motion.aside
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 16 }}
        >
          <Mascot />
          <p>Need a hand?</p>
        </motion.aside>
      )}
    </AnimatePresence>
  );
}

Define el tamaño del contenedor, no del canvas, para que Rive pueda ajustar su propio layout, y anima la opacidad y la posición del contenedor en lugar del propio elemento canvas.

¿Cuál suma más a tu bundle?

Rive, por un margen claro, porque incluye un renderizador en WebAssembly. La tabla de tamaños de runtime publicada por Rive indica para los paquetes web 222 KB (canvas-lite), 567 KB (canvas) y 648 KB (webgl2) tras la compresión brotli. La medición propia de Charmotion de @rive-app/canvas-lite 2.44.0 dio unos 373 KB con brotli, así que revisa la versión que instales. Los paquetes de React envuelven estos runtimes.

Motion es una librería JavaScript sin WebAssembly. Su documentación explica cómo reducir aún más su peso con el componente m y LazyMotion, que cargan las funciones de animación bajo demanda. No hemos encontrado una medición independiente que valga la pena citar, así que mídelo en tu propio build con el analizador de tu bundler.

La comparación más justa es por tarea. Recrear un personaje riggeado con Motion implicaría enviar el arte como SVG junto con mucho código de animación. Usar Rive para un efecto de hover implicaría un runtime grande para algo que CSS hace gratis. Carga el runtime de Rive solo en las rutas que muestran un personaje y usa carga diferida (lazy loading) cuando el canvas entre en pantalla al hacer scroll.

Rive también documenta las diferencias entre renderizadores: los paquetes Canvas2D evitan los límites de contextos WebGL, mientras que webgl2 usa el Rive Renderer, que es necesario para funciones como el vector feathering.

¿Cuál funciona fuera de React?

Ambos, en direcciones distintas.

Motion se queda en la web. Además de la API de React, ahora ofrece funciones de JavaScript vanilla, así que puedes animar elementos en una página HTML simple o en otro framework. No funciona en apps nativas de iOS, Android o Flutter; esas plataformas tienen sus propios sistemas de animación, como las animaciones de SwiftUI, Jetpack Compose y las animaciones implícitas de Flutter.

Rive es multiplataforma por diseño. El mismo archivo .riv se reproduce mediante runtimes oficiales para la web (JavaScript y React), plataformas de Apple, Android, Flutter y React Native. Si una mascota de marca aparece en tu sitio de marketing y dentro de tus apps móviles, un solo archivo de Rive y un único conjunto de nombres de propiedades cubren todos los casos, lo que mantiene al personaje idéntico en todas partes.

Esa diferencia suele definir la decisión para los equipos de producto. El motion de interfaz depende de cada plataforma de todos modos, así que una librería web funciona bien. Un personaje de marca no, así que un archivo portable vale más que un código que solo se ejecuta en el navegador.

Para los detalles específicos de React Native y Flutter, consulta Lottie vs Rive en React Native y Flutter.

¿Deberías elegir Rive o Motion?

Elige Motion si:

• estás animando tu propia interfaz: modales, menús, listas, transiciones de página, layout compartido;
• las animaciones dependen del estado de React, de gestos o de la posición del scroll;
• quieres todo en código, sin ningún recurso externo que gestionar;
• quieres que el movimiento reducido se gestione de forma integrada con MotionConfig reducedMotion="user".

Elige Rive si:

• la animación es ilustrada: una mascota de marca, un avatar de asistente, un logo animado o un control interactivo complejo;
• tiene varios estados entre los que tu app va cambiando;
• el mismo arte debe reproducirse en la web y en apps nativas;
• es un diseñador, no un desarrollador, quien decide cómo se mueve.

La mayoría de las apps de React que usan Rive también usan Motion o CSS para todo lo demás. Si tienes un personaje pero no un animador, Charmotion convierte el personaje, la mascota de marca o el logo que subas en 17 animaciones en unos minutos: un .riv con un view model de Data Binding e inputs heredados, además de código listo para React, web y SwiftUI y exportaciones de video. La guía de animación en React muestra ambas librerías en una misma app.

Preguntas frecuentes

¿Motion reemplaza a Rive?

No. Motion anima elementos del DOM y de React que ya renderizas, con valores definidos en código. Rive reproduce arte vectorial creado en su editor, con una máquina de estados (state machine) dentro del archivo. Un personaje o una mascota de marca es trabajo para Rive o Lottie; las transiciones, los cambios de layout y los gestos de tu interfaz son trabajo para Motion o CSS.

¿Motion es gratis?

El paquete motion es de código abierto y se instala desde npm como cualquier otra librería. El sitio web de Motion también vende extras de pago opcionales; consulta motion.dev para ver qué incluyen hoy. Los runtimes de Rive tienen licencia MIT, mientras que su editor tiene planes gratis y de pago; las exportaciones del plan gratis muestran una splash screen.

¿Motion puede animar un personaje en SVG?

Sí, puedes envolver paths de SVG en componentes de motion y animar sus atributos. Funciona para ilustraciones sencillas, pero cada keyframe vive en el código y el resultado solo se ejecuta en la web. Para un personaje riggeado con muchos estados, un archivo de Rive es mucho más fácil de mantener y además se reproduce en apps nativas.

¿Rive funciona con Next.js?

Sí. Usa el paquete de React de Rive en un componente de cliente, marcado con la directiva use client, porque renderiza en un canvas en el navegador. Coloca el archivo .riv en la carpeta public y cárgalo por URL. Los componentes de Motion que usan estado o gestos también tienen que ser componentes de cliente.

Respuestas rápidas de esta guía

• ¿Framer Motion es una alternativa a Rive?

Fuentes

• Framer Motion is now independent, introducing Motion, Motion
• Upgrade guide, Motion
• Reduce bundle size, Motion
• Accessibility, Motion
• React runtime, Rive
• Runtime sizes, Rive
• Choose a renderer, Rive
• State machine inputs (legacy), Rive