Rive vs Motion (Framer Motion): Different Jobs

What does each library actually animate?

Motion animates the elements your components already render. You swap a div for motion.div, describe the start and end values, and Motion handles the in-between: fades, slides, springs, gestures such as hover and tap, exit animations through AnimatePresence, and layout animations when an element changes size or position.

Rive renders artwork that someone drew and animated in the Rive editor. The .riv file contains vector shapes, bones, timelines and a state machine; your code loads it into a canvas and tells it which state to be in.

Asking which is better is like asking whether CSS is better than an illustration. They answer different questions.

Is Framer Motion now called Motion?

Yes. On November 12, 2024, Framer Motion became an independent project named Motion. For React projects the change is a package rename: install motion and replace imports from framer-motion with motion/react.

npm uninstall framer-motion
npm install motion

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

Motion's upgrade guide treats the component API as unchanged, so existing motion.div code keeps working after the import change. The project also added vanilla JavaScript APIs, so the same animation engine can be used without React.

Comparisons written before the rename, including many "Rive vs Framer Motion" posts, still apply. Read "Framer Motion" as "Motion" throughout this guide. Rive's naming is stable by comparison: the editor, the .riv format and the runtimes have kept their names, though the runtimes' recommended packages have changed.

When do you need a designer-authored asset?

When the thing that moves does not exist as an element in your page. Motion can only animate what you render. A button, a card, a modal and a list item are elements, so Motion is a natural fit. A mascot that blinks, tilts its head and celebrates is not; it is a drawing with a skeleton.

You could build a character from inline SVG paths and animate each part with Motion, but every keyframe would live in code, every design change would be a code change, and the artwork would be stuck on the web. That is where a designed-asset format pays off. In Rive, an animator draws the character, rigs it with bones, builds loops and reactions on a timeline, and wires them into a state machine. Engineers get one file and a small API.

Rive now recommends data binding with view models for that API; its docs mark state-machine inputs as legacy while keeping them working. Data binding syncs values both ways between your app and the file, so a number such as mood or a trigger such as success becomes a typed property you set from React.

Rule of thumb: if a designer would hand you a file, use Rive (or Lottie). If you would describe the motion in a ticket, use Motion or CSS.

Can you use Rive and Motion together?

Yes, and it is a common pattern. Motion animates the container, Rive animates the character inside it. The two never touch the same pixels, so there is nothing to conflict.

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

function Mascot() {
  const { RiveComponent } = useRive({
    src: "/mascot.riv",
    stateMachines: "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>
  );
}

Size the wrapper, not the canvas, so Rive can lay itself out, and animate the wrapper's opacity and position rather than the canvas element itself.

Which adds more to your bundle?

Rive, by a clear margin, because it ships a WebAssembly renderer. Rive's published runtime-size table lists the web packages at 222 KB (canvas-lite), 567 KB (canvas) and 648 KB (webgl2) after brotli compression. Charmotion's own measurement of @rive-app/canvas-lite 2.44.2 on 2026-10-12 came to about 275 KB brotli, so check the version you install. The React packages wrap these runtimes.

Motion is a JavaScript library with no WebAssembly. Its documentation describes how to cut its footprint further with the m component and LazyMotion, which load animation features on demand. We have not found an independent measurement worth quoting, so measure it in your own build with your bundler's analyzer.

The fairer comparison is per job. Recreating a rigged character with Motion would mean shipping the artwork as SVG plus a lot of animation code. Using Rive for a hover effect would mean a large runtime for something CSS does for free. Load the Rive runtime only on routes that show a character, and lazy-load it when the canvas scrolls into view.

Rive also documents renderer differences: the Canvas2D packages avoid WebGL context limits, while webgl2 uses the Rive Renderer, which features such as vector feathering require.

Which works outside React?

Both, in different directions.

Motion stays on the web. Alongside the React API, it now offers vanilla JavaScript functions, so you can animate elements in a plain HTML page or another framework. It does not run in native iOS, Android or Flutter apps; those platforms have their own animation systems such as SwiftUI animations, Jetpack Compose and Flutter's implicit animations.

Rive is cross-platform by design. The same .riv file plays through official runtimes for the web (JavaScript and React), Apple platforms, Android, Flutter and React Native. If a mascot appears on your marketing site and inside your mobile apps, one Rive file and one set of property names cover all of them, which keeps the character identical everywhere.

That difference often decides the question for product teams. Interface motion is platform-specific anyway, so a web library is fine. A brand character is not, so a portable file is worth more than code that only runs in the browser.

For React Native and Flutter specifics, see Lottie vs Rive in React Native and Flutter.

Should you choose Rive or Motion?

Choose Motion if:

• you are animating your own interface: modals, menus, lists, page transitions, shared layout;
• animations depend on React state, gestures or scroll position;
• you want everything in code with no external asset to manage;
• you want reduced-motion handling built in through MotionConfig reducedMotion="user".

Choose Rive if:

• the animation is illustrated: a mascot, an assistant avatar, an animated logo or a rich interactive control;
• it has several states that your app switches between;
• the same artwork must play on web and native apps;
• a designer, not a developer, owns how it moves.

Most React apps that use Rive also use Motion or CSS for everything around it. If you have a character but no animator, Charmotion turns an uploaded character, mascot or logo into 17 animations in about 1–2 hours: one .riv with a Data Binding view model and legacy inputs, plus ready-made React, web and SwiftUI code and video exports. The React animation guide shows both libraries in one app.

Frequently asked questions

Is Motion a replacement for Rive?

No. Motion animates DOM and React elements you already render, using values in code. Rive plays vector artwork authored in its editor, with a state machine inside the file. A character or mascot is a job for Rive or Lottie; transitions, layout changes and gestures in your interface are jobs for Motion or CSS.

Is Motion free?

The motion package is open source and installs from npm like any other library. Motion's website also sells optional paid extras; check motion.dev for what they include today. Rive's runtimes are MIT-licensed, while its editor has free and paid plans; the free plan's exports show a splash screen.

Can Motion animate an SVG character?

Yes, you can wrap SVG paths in motion components and animate their attributes. It works for simple illustrations, but every keyframe lives in code and the result runs only on the web. For a rigged character with many states, a Rive file is far easier to maintain and also plays in native apps.

Does Rive work with Next.js?

Yes. Use Rive's React package in a client component, marked with the use client directive, because it renders to a canvas in the browser. Put the .riv file in the public folder and load it by URL. Motion components that use state or gestures also need to be client components.

Quick answers from this guide

• Is Framer Motion an alternative to Rive?

Sources

• 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