{"name":"Motion: A Modern Animation Library for React, JavaScript, and Vue","description":"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","url":"https://osrepos.com/repo/motiondivision-motion","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/motiondivision-motion","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/motiondivision-motion.md","json":"https://osrepos.com/repo/motiondivision-motion.json","topics":["animation","react","javascript","vue","typescript","frontend","web development","motion-library"],"keywords":["animation","react","javascript","vue","typescript","frontend","web development","motion-library"],"stars":null,"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.","content":"## Introduction\n\nMotion 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.\n\n## Installation\n\nGetting started with Motion is straightforward. You can install it via npm for your React/JavaScript or Vue projects.\n\nbash\n# For React / JavaScript projects\nnpm install motion\n\n# For Vue projects\nnpm install motion-v\n\n\n## Examples\n\nMotion offers extensive documentation and a rich collection of examples to help you integrate animations into your projects.\n\n### React Example\n\njsx\nimport { motion } from \"motion/react\"\n\nfunction Component() {\n    return <motion.div animate={{ x: 100 }} />\n}\n\n\nGet started with [Motion for React](https://motion.dev/docs/react){:target=\"_blank\"}.\n\n### JavaScript Example\n\njavascript\nimport { animate } from \"motion\"\n\nanimate(\"#box\", { x: 100 })\n\n\nGet started with [Motion for JavaScript](https://motion.dev/docs/quick-start){:target=\"_blank\"}.\n\n### Vue Example\n\nhtml\n<script>\n    import { motion } from \"motion-v\"\n</script>\n\n<template> <motion.div :animate=\"{ x: 100 }\" /> </template>\n\n\nGet started with [Motion for Vue](https://motion.dev/docs/vue){:target=\"_blank\"}.\n\nYou 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\"}.\n\n## Why Use Motion?\n\nMotion stands out for several compelling reasons:\n\n*   **Simple API**: It provides first-class packages for React, JavaScript, and Vue, making it easy to integrate into your preferred framework.\n*   **Hybrid Engine**: Combining the power of JavaScript with native browser APIs, Motion delivers 120fps, GPU-accelerated animations for smooth performance.\n*   **Production-Ready**: Built with TypeScript, an extensive test suite, tree-shakable architecture, and a tiny footprint, Motion is optimized for production environments.\n*   **Batteries Included**: The library comes packed with features like gestures, springs, layout transitions, scroll-linked effects, and timelines, offering a complete animation toolkit.\n\n## Links\n\n*   **GitHub Repository**: [motiondivision/motion](https://github.com/motiondivision/motion){:target=\"_blank\"}\n*   **Official Documentation**: [motion.dev](https://motion.dev){:target=\"_blank\"}\n*   **Examples**: [motion.dev/examples](https://motion.dev/examples){:target=\"_blank\"}\n*   **Tutorials**: [motion.dev/tutorials](https://motion.dev/tutorials){:target=\"_blank\"}\n*   **Motion+ (Premium Features)**: [motion.dev/plus](https://motion.dev/plus){:target=\"_blank\"}","metrics":{"detailViews":5,"githubClicks":19},"dates":{"published":null,"modified":"2026-04-06T23:39:13.000Z"}}