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

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

• GitHub Repository: motiondivision/motion
• Official Documentation: motion.dev
• Examples: motion.dev/examples
• Tutorials: motion.dev/tutorials
• Motion+ (Premium Features): motion.dev/plus