Uwarp

Framer Motion — React animation library, now Motion

Animate React layouts, gestures, and scroll with Motion, the library that replaced the framer-motion package.

  • React Animation
  • Layout
  • Gestures
  • Scroll
Publisher
Motion
Type
React Animation Library
Pricing
Freemium
Reviewed
25 September 2026
Official site

Quick verdict

Use when

  • React UI animation
  • Layout and gesture motion
  • Scroll-linked effects
  • MIT library in the app

Skip when

  • Hosted site builder, no code
  • Lottie file playback only
  • Copy-paste components, not a library

Framer Motion vs common animation libraries

Motion, previously Framer Motion, next to two libraries developers use for interface animation: license, install shape, motion types, and where the animation runs.

Tap a dimension to focus

Pricing

  1. Motion — official site
  2. Motion for React — docs
  3. Motion+ — membership
  4. GSAP — official site
  5. React Spring — official site

Preview of Framer Motion - not the live app. Confirm details on the official site.

Does this overview help you decide?

—

(—)

Learn more

Details below the decision summary—features, workflow, and scope notes.

What is Framer Motion?

Animate React layouts, gestures, and scroll with Motion, the library that replaced the framer-motion package.

What it costs

The open-source library and the optional Motion+ membership. Confirm live membership terms on motion.dev.
Free tier
Yes
Pricing summary
The Motion library is MIT licensed. Install it with npm and import React helpers from motion/react. Motion+ is an optional paid membership for premium examples, extra APIs, and AI tooling; it does not close the core library. Team seats are a separate business package. Confirm current membership terms on the Motion+ page.

Reviewed on 25 September 2026 · Motion+ — membership

What the library animates

Capabilities from the Motion docs. This is not the Framer website builder.

  • Springs and enter animations

    Start with prop-based animation on a motion component, including spring transitions, before you add more complex sequences.

  • Layout, gestures, and scroll

    Docs cover layout animation, drag and hover gestures, and scroll-linked effects, plus SVG animation.

  • React, JavaScript, and Vue

    React and JavaScript use the motion package. Vue uses motion-v. Existing framer-motion imports move to motion/react.

  • Optional Motion+

    A membership adds example source, premium APIs, and agent tooling. The MIT library remains usable without it.

How to start from framer-motion

Upgrade path from the Motion for React docs.

  1. Install the current package

    Uninstall framer-motion if it is already in the project, then npm install motion. Vue projects use motion-v instead.

  2. Switch the import

    Import from motion/react, for example import { motion } from "motion/react", instead of the old framer-motion entry.

  3. Animate one element

    Wrap a DOM node in the motion component and set an animate prop. The React guide walks from that first animation into layout, hover, and scroll.

  4. Read the upgrade guide for breaks

    Major versions change APIs. Use the Motion upgrade guide before you assume an old framer-motion snippet still matches the current package.

Who Framer Motion is for

Developers animating interface code.

  • React product engineers

    Add layout shifts, drags, and scroll effects inside components you already ship, without a separate timeline tool.

  • Teams leaving the old package name

    Projects still on framer-motion can move to the motion package and keep the same animation job.

  • Developers who do not want a site builder

    The library animates your app. Publishing a marketing site on a canvas is a different product.

When Framer Motion is the right pick

Choose Motion when a React, JavaScript, or Vue app needs layout, gesture, or scroll animation in code. Skip it when you want a hosted website builder, a Lottie file to drop in, or a catalog of components to copy instead of a library.

Package notes

Facts from motion.dev and the Motion for React docs.
Where it runs
Animations run in the browser. The docs describe a hybrid engine that uses native browser APIs and falls back to JavaScript when needed.
Package names
npm install motion for React and JavaScript. Import React APIs from motion/react. The previous package name was framer-motion.
Not the website builder
Framer the site builder can use Motion under published sites. Choosing this library does not include Framer hosting, CMS, or templates.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.