Repolode
Submit
motiondivision

motiondivision/motion

An open source animation library for JavaScript, React and Vue, offering springs, gestures, layout transitions and scroll-linked effects.

View on GitHubWebsite
Stars
34,961
Forks
1,520
Open issues
16
Last commit
21 hours ago

What is it?

Motion is an animation library for JavaScript, with dedicated packages for React and Vue. The React package is imported from motion/react, while the core JavaScript package exposes an animate function that takes a selector or element and a set of target values.

The library combines JavaScript control with native browser APIs to run animations on the GPU. It includes gestures, spring physics, layout transitions, scroll-linked effects and timelines. The package is TypeScript-based, tree-shakable, and ships with a large set of official examples and step-by-step tutorials.

Motion was previously published as Framer Motion; the README notes that React users should import from motion/react instead of framer-motion. Motion+ is a paid tier that adds premium APIs, a transition editor and additional examples.

Key features

  • 01Declarative React components and a plain JavaScript animate function.
  • 02Spring physics, gestures and layout transitions.
  • 03Scroll-linked effects and timelines.
  • 04Vue support through the motion-v package.
  • 05TypeScript types and tree-shakable builds.

Use cases

  • Adding entrance, exit and hover animations to React component interfaces.
  • Animating elements that change position or size in a layout.
  • Building scroll-driven effects on marketing or landing pages.
  • Adding motion to a Vue application without writing low-level animation code.

Quick start

  1. 1

    Install Motion for React or JavaScript

    npm install motion
  2. 2

    Install Motion for Vue

    npm install motion-v
  3. 3

    Import and use the React component

Things to know

  • Framer Motion has been renamed to Motion, so older framer-motion imports need updating to motion/react.

Topics

#animation#react#javascript#vue#typescript#spring#gestures#frontend-animation#animation-js#motion

FAQ

What is motion?
An open source animation library for JavaScript, React and Vue, offering springs, gestures, layout transitions and scroll-linked effects. Motion is an animation library for JavaScript, with dedicated packages for React and Vue. The React package is imported from motion/react, while the core JavaScript package exposes an animate function that takes a selector or element and a set of target values.
Is motion free to use? What license does it have?
motion is open source under the MIT license. Check the license terms before using it in commercial products.
Is motion still maintained?
Actively maintained. The last commit to motion was on Nov 6, 2026.
What can I use motion for?
Adding entrance, exit and hover animations to React component interfaces. Animating elements that change position or size in a layout. Building scroll-driven effects on marketing or landing pages. Adding motion to a Vue application without writing low-level animation code.
How do I install motion?
Install Motion for React or JavaScript: npm install motion Install Motion for Vue: npm install motion-v Import and use the React component
Where can I get motion?
The source code and installation instructions are on GitHub: https://github.com/motiondivision/motion

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects