# Motion

> Animation library for React, JavaScript and Vue (formerly Framer Motion)

- Category: Motion & animation (`motion`)
- Tags: `free`, `open-source`, `react`
- Official: https://motion.dev
- Docs: https://motion.dev/docs/react
- Wunderlust: https://wunderlust.xyz/r/motion
- Image: https://wunderlust.xyz/media/motion-poster.jpg
- Video preview: https://wunderlust.xyz/media/motion.webm
- Added: 2026-11-05

## What it is

Motion is an animation library for React, JavaScript and Vue, formerly called Framer Motion. It covers layout animations, gestures, scroll, springs and component exit animations.

## What it’s for

To animate web interfaces with layout transitions, hover, drag and scroll without hand-writing everything. The documentation includes an AI Kit for coding agents to write animations with Motion.

## Benefits

- Layout animations, gestures, scroll and springs in one API
- AnimatePresence keeps the component mounted until its exit animation finishes
- Mini animate function from 3.2kb, with LazyMotion to load features on demand
- AI Kit for coding agents to use the documentation and examples

## Caveats

- The core library is free and open source; Motion+ (components, examples, the Motion Studio timeline editor) is a paid offering, with no price listed on the page
- According to the maker, most animations run on the browser's animation engine, with hardware acceleration

## Similar on Wunderlust

- [GSAP](https://wunderlust.xyz/r/gsap.md): A professional JavaScript animation library with timelines and plugins
- [React Bits](https://wunderlust.xyz/r/react-bits.md): A library of animated React components: text, backgrounds and microinteractions
- [Anime.js](https://wunderlust.xyz/r/anime-js.md): JavaScript animation library for the web, with timeline, SVG and scroll
- [Design Motion Principles](https://wunderlust.xyz/r/design-motion-principles.md): A motion skill with modes for creating and auditing interface animations
- [AI Website Cloner Template](https://wunderlust.xyz/r/ai-website-cloner-template.md): A template that recreates a site as a Next.js app from a URL
- [shadcn/ui](https://wunderlust.xyz/r/shadcn-ui.md): Accessible, customizable components for building your own design system