# Motion

> Open-source animation library for React, Vue, and vanilla JavaScript

Motion (formerly Framer Motion) is a lightweight web animation library that provides declarative syntax, gesture controls, and layout transitions. It combines hardware-accelerated browser APIs with a JavaScript engine to produce smooth UI interactions at a small bundle size. Developers can use it directly via framework components or plain JavaScript, supported by prebuilt UI templates and AI developer tooling.

Website: https://motion.dev/

## What it is for

- Animate complex UI layout transitions with a single prop
- Add gesture interactions like dragging, hovering, and pressing to web elements
- Trigger scroll-linked animations using hardware-accelerated browser APIs
- Orchestrate multi-step animation sequences and exit transitions for DOM elements

## Features

- Support for React, Vue, and vanilla JavaScript
- Independent transform properties without wrapper elements
- Hardware-accelerated scroll animations via ScrollTimeline
- Built-in native gestures including hover, press, and drag
- Automatic layout animations using the layout prop
- Spring physics engine for realistic motion response
- AnimatePresence component for handling DOM exit animations
- Motion Studio visual editor and AI agent tools (AI Kit)

## Pricing

Freemium. Core library is free and open source (MIT); Motion+ offers paid add-on tools, examples, and UI kits.

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library, Web
- For: Frontend web developers and UI designers
- Alternative to: GSAP, Anime.js
- Tags: animation, javascript, react, vue, frontend, ui

## Why it was saved

- [@kalypsodesigns, 7 May 2025](https://www.instagram.com/p/DJWFDHhzGzl/): Enables declarative animations, gesture handling, and layout transitions across modern frontend frameworks.
- [@frontendjoe, 12 November 2023](https://www.instagram.com/reel/CzjJ5OutLw1/): Allows developers to power simple to complex React UI animations declaratively using motion components and straightforward animate properties.
- [@jeetnirnejak, 9 June 2026](https://x.com/jeetnirnejak/status/2064364602490806689): Named in the tweet as the animation tool used.
- [@voidyaps, 23 September 2026](https://x.com/voidyaps/status/2102817538229063855): The go-to animation engine for the kind of micro-interactions the list celebrates; hybrid engine with JS and hardware-accelerated browser APIs; agent-compatible docs/API.

## Compare

- [Alternatives to GSAP](https://xiry.app/alternatives/gsap.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)
- [Magic UI](https://xiry.app/resources/magic-ui): Animated React and Tailwind UI components designed for landing pages (Website, Freemium)

Updated 3 October 2026. Page: https://xiry.app/resources/motion

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.