# Motion: A Modern Animation Library for React, JavaScript, and Vue

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/motiondivision-motion
Generated for open source discovery and AI-assisted research.

Motion is a powerful open-source animation library designed for JavaScript, React, and Vue applications. It offers a simple API, a hybrid engine for 120fps GPU-accelerated animations, and a comprehensive suite of features including gestures, springs, and layout transitions. Developers can leverage Motion to create production-ready, high-performance animations with a tiny footprint.

GitHub: https://github.com/motiondivision/motion
OSRepos URL: https://osrepos.com/repo/motiondivision-motion

## Summary

Motion is a powerful open-source animation library designed for JavaScript, React, and Vue applications. It offers a simple API, a hybrid engine for 120fps GPU-accelerated animations, and a comprehensive suite of features including gestures, springs, and layout transitions. Developers can leverage Motion to create production-ready, high-performance animations with a tiny footprint.

## Topics

- animation
- react
- javascript
- vue
- typescript
- frontend
- web development
- motion-library

## Repository Information

Last analyzed by OSRepos: Tue Apr 07 2026 00:39:13 GMT+0100 (Western European Summer Time)
Detail views: 5
GitHub clicks: 19

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction

Motion is a modern, open-source animation library for JavaScript, React, and Vue, designed to bring high-performance, GPU-accelerated animations to your web applications. Formerly known as Framer Motion, this library provides a simple yet powerful API for creating fluid and engaging user interfaces. With over 31,000 stars on GitHub, Motion is a widely adopted solution for developers looking to enhance their projects with sophisticated animations.

## Installation

Getting started with Motion is straightforward. You can install it via npm for your React/JavaScript or Vue projects.

bash
# For React / JavaScript projects
npm install motion

# For Vue projects
npm install motion-v


## Examples

Motion offers extensive documentation and a rich collection of examples to help you integrate animations into your projects.

### React Example

jsx
import { motion } from "motion/react"

function Component() {
    return <motion.div animate={{ x: 100 }} />
}


Get started with [Motion for React](https://motion.dev/docs/react){:target="_blank"}.

### JavaScript Example

javascript
import { animate } from "motion"

animate("#box", { x: 100 })


Get started with [Motion for JavaScript](https://motion.dev/docs/quick-start){:target="_blank"}.

### Vue Example

html
<script>
    import { motion } from "motion-v"
</script>

<template> <motion.div :animate="{ x: 100 }" /> </template>


Get started with [Motion for Vue](https://motion.dev/docs/vue){:target="_blank"}.

You can browse over 330 [official examples](https://motion.dev/examples){:target="_blank"}, many of which include step-by-step [tutorials](https://motion.dev/tutorials){:target="_blank"}.

## Why Use Motion?

Motion stands out for several compelling reasons:

*   **Simple API**: It provides first-class packages for React, JavaScript, and Vue, making it easy to integrate into your preferred framework.
*   **Hybrid Engine**: Combining the power of JavaScript with native browser APIs, Motion delivers 120fps, GPU-accelerated animations for smooth performance.
*   **Production-Ready**: Built with TypeScript, an extensive test suite, tree-shakable architecture, and a tiny footprint, Motion is optimized for production environments.
*   **Batteries Included**: The library comes packed with features like gestures, springs, layout transitions, scroll-linked effects, and timelines, offering a complete animation toolkit.

## Links

*   **GitHub Repository**: [motiondivision/motion](https://github.com/motiondivision/motion){:target="_blank"}
*   **Official Documentation**: [motion.dev](https://motion.dev){:target="_blank"}
*   **Examples**: [motion.dev/examples](https://motion.dev/examples){:target="_blank"}
*   **Tutorials**: [motion.dev/tutorials](https://motion.dev/tutorials){:target="_blank"}
*   **Motion+ (Premium Features)**: [motion.dev/plus](https://motion.dev/plus){:target="_blank"}