motion README

The project's README from github.com/motiondivision/motion. As one markdown file: README.md.

Motion logo
Motion

An open source animation library
for JavaScript, React and Vue

npm version npm downloads per month jsDelivr hits (npm) NPM License MotionScore grade 

# React / JavaScript
npm install motion

# Vue
npm install motion-v

Table of Contents

  1. Why Motion?
  2. 🍦 Platforms
  3. 🎓 Examples
  4. 🎨 Motion Studio
  5. 🤖 Using Motion with AI
  6. ⚡️ Motion+
  7. 👩🏻‍⚖️ License
  8. 💎 Contribute
  9. ✨ Sponsors

Why Motion?

🍦 Platforms

Motion is available for React, JavaScript and Vue.

React

import { motion } from "motion/react"

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

Get started with Motion for React.

Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.

JS

import { animate } from "motion"

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

Get started with JavaScript.

Vue

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

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

Get started with Motion for Vue.

🎓 Examples & tutorials

Browse 450+ official examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.

Over 110 examples come with a full step-by-step tutorial on their example page.

🤖 Using Motion with AI

Give your coding agent current Motion docs:

Motion+ adds example and Motion UI source, MotionScore performance audits and CSS spring generation for your agent.

🎨 Motion Studio

A visual animation editor for your website. Edit keyframes, easing curves and springs on a live timeline, or describe changes to the Ultramotion agent, then apply the result straight to your code with Cursor, Codex or Claude.

Explore Motion Studio

⚡️ Motion+

A one-time Personal licence with lifetime updates, or an annual per-seat Business plan for teams:

Get Motion+

👩🏻‍⚖️ License

💎 Contribute

✨ Sponsors

Motion is sustainable thanks to the kind support of its sponsors.

Become a sponsor

Partners

Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.

Framer

Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.

Cursor

Platinum

Linear Figma Sanity Clerk

Gold

Silver

Liveblocks Frontend.fyi Firecrawl Bolt.new

Personal sponsors

motion (motiondivision/motion)

Searching Database…

34.2K ·GitHub
Motion
Что это такое?Motion — это библиотека анимаций с открытым исходным кодом для JavaScript, React и Vue. Возможно, вы знаете её под прежним названием Framer Motion.
Она только для React или работает ещё и с обычным JavaScript и Vue?Это библиотека, а не фреймворк: вы добавляете один из её готовых пакетов — для React, обычного JavaScript или Vue — к тому интерфейсу, который у вас уже есть.
Как подключить её к своему проекту?Выберите пакет под свой стек и следуйте его руководству Get started — в README есть отдельные руководства для React, JavaScript и Vue.
Я раньше пользовался Framer Motion — это теперь другая библиотека?Та же библиотека, просто новое название: Framer Motion теперь называется Motion. Замените импорты с 'framer-motion' на 'motion/react'.
Она бесплатная? И что такое Motion+?Библиотека распространяется по лицензии MIT и бесплатна. Платная только Motion+ — необязательная подписка с разовым платежом и пожизненными обновлениями.
Что она умеет анимировать сразу, без настройки?Жесты, пружинные анимации, переходы между раскладками, эффекты, привязанные к прокрутке, и таймлайны — всё встроено, дополнительные плагины не нужны.
Где посмотреть на работающий код?Есть более 330 официальных примеров с кодом, который можно скопировать и вставить, и больше 100 из них снабжены полным пошаговым разбором.
Что даёт подписка Motion+?Премиум-API вроде Cursor и Ticker, редактор переходов для Cursor и VS Code, AI-навыки, приватный Discord и ранний доступ к новым материалам — один платёж, обновления навсегда.
What are similar projects?velocity, auto-animate, Libraries.dev, shaders, mojs, react-motion, lenis, GSAP
Which topics is it in?transition, motion, spring, javascript-library, vue, animation, ui, web-development, performance, gpu, react, npm
Creator
motiondivision
Size
1.6 GB
Stars
34.2K
Updated
CommitOct 16
Age
7y
Commits · 90 Days