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

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

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.

Repository Info

Updated on April 7, 2026
View on GitHub

Tags

animationreactjavascriptvuetypescriptfrontendweb developmentmotion-library

Click on any tag to explore related repositories

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.

# 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

import { motion } from "motion/react"

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

Get started with Motion for React.

JavaScript Example

import { animate } from "motion"

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

Get started with Motion for JavaScript.

Vue Example

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

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

Get started with Motion for Vue.

You can browse over 330 official examples, many of which include step-by-step tutorials.

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