Skip to content
Get packs

Motion

An open source animation library for JavaScript, React and Vue.

GitHub Download source
Stars
34.8k
Forks
1.5k
Licence
MIT
Language
TypeScript
Last update
4 days ago
Type
Library

What it is

Motion is a code library that lets developers add movement to web pages and apps, such as sliding, fading, springy bounces, and layout changes. It offers packages for React, plain JavaScript and Vue, and its README says it uses browser APIs for smooth, GPU-accelerated animation. It was formerly known as Framer Motion.

  • Animate a React component's position with a single animate prop
  • Trigger a JavaScript animation on a selected element with the animate function
  • Add gesture-driven, spring-based or layout-transition effects to interface elements
  • Copy from the 450+ official examples as a starting point

Great for

  • React developers who want to animate components with a simple API
  • JavaScript developers animating elements on a web page
  • Vue developers looking for an animation package
  • Teams building interactive websites that need gestures, springs or scroll-linked effects

Not ideal for

  • People who want a visual tool with no coding: the README's visual editor, Motion Studio, is a separate product
  • Projects that need only a few CSS transitions, where native CSS may be simpler (general judgment, not stated in the README)
Step-by-step guide: how to use MotionInstall, first run, examples, tips and FAQs
Motion alternativesMotion vs react-springmo · js vs MotionMotion vs ScrollMagicMaterial vs Motion

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm

    React / JavaScript

    npm install motion

    Vue

    npm install motion-v
  2. 2

    Run it

    • Install the package for your framework with the command above
    • Import the component or function you need, such as motion/react or animate from motion
    • Apply an animation, for example animate="{{ x: 100 }}" on a motion.div in React
    • Browse the official examples at motion.dev/examples for more patterns
  3. 3

    Get the most out of it

    • Use the official examples (450+) as copy-paste starting points
    • Connect a coding agent to the Motion MCP server or run npx motion-ai for current docs
    • Check llms.txt on motion.dev to give AI tools a full docs index
    • Consider Motion Studio if you want to edit keyframes and springs visually

Downloads

Source code (.zip)main branch · straight from GitHubOfficial website & docsmotion.dev

Strengths

  • The README lists first-class React, JavaScript and Vue packages under one name
  • Released under the MIT license and tree-shakable, per the README
  • Large official example library with 450+ examples and tutorials

Trade-offs

  • Some advanced features, including Motion+ content and the Transition editor, are paid
  • The README does not describe bundle size or performance numbers beyond general claims
  • Formerly Framer Motion; older projects need their imports updated to motion/react

How it compares

ProjectStarsTypeLevelUpdatedBest for
motion (this)34.8kLibraryintermediate4 days agoReact developers who want to animate components with a simple API
react-spring29.3kLibraryintermediate5 days agoReact developers who want fluid, physics-based animations
mojs18.9kLibraryintermediate3 months agoFront-end developers who want decorative animated effects like bursts, shapes, or icon animations
anime74.2kLibrarybeginner3 months agoFront-end developers adding motion to websites or web apps
lax.js10.5kLibraryintermediate1.5 years agoDevelopers adding simple scroll-linked effects to a static site or plain HTML page
react-three-fiber33.4kLibraryintermediate15 days agoReact developers who want to add 3D scenes to a web app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.