motion: Animate Interfaces with JavaScript, React, and Vue

Overview

Motion is a TypeScript animation library for adding motion to web interfaces, with packages for JavaScript, React, and Vue. Its APIs cover both basic element animation and interaction patterns, so teams can build animated interfaces without assembling separate tools for gestures, springs, and transitions.

Use it when animation is an important part of the interface and you want framework-specific APIs alongside a JavaScript option. See the official repository and Motion documentation for implementation details.

Key Features

• APIs for React, JavaScript, and Vue.
• Animate elements using declarative values or JavaScript calls.
• Supports gesture-driven interactions and spring animations.
• Includes layout transitions and scroll-linked effects.
• Offers timelines for coordinating animations.
• TypeScript support and tree-shaking, as described by the project.

Use Cases

• React developers can add entrance, exit, and state-change animations to interface components.
• JavaScript developers can animate selected elements without adopting a UI framework.
• Vue developers can add motion effects using the Vue package.
• Product teams can use gestures, springs, and layout transitions to make interactive interfaces feel more responsive.
• Teams building scroll-driven experiences can use scroll-linked effects rather than implementing the animation behavior themselves.

Getting Started

Install the package for React or JavaScript:

npm install motion

For Vue, install motion-v. Follow the README and the official documentation for platform-specific setup and usage.

Alternatives

• Fancy: Fancy offers ready-made animated React components and microinteractions, while Motion provides a broader toolkit for building animations across React, Vue, and JavaScript.
• Theatre.js: Theatre.js focuses on visually authoring detailed motion graphics, while Motion focuses on gestures, springs, layout transitions, and scroll-linked effects.

Considerations

• The React package is imported from motion/react; the README notes that Motion is the current name of Framer Motion and that imports should no longer use framer-motion.
• Vue uses a separate package, motion-v, rather than the motion package.
• The repository describes the project as supporting JavaScript, React, and Vue, but the APIs and setup differ by platform. Check the corresponding documentation before choosing an integration.
• Motion+ is a paid offering with additional resources and features; the core library is MIT licensed.