The Principal Dev – Masterclass for Tech Leads

The Principal Dev – Masterclass for Tech LeadsJuly 17-18

Join

Motion logo
Motion

An open source animation library
for JavaScript, React and Vue

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

npm install motion

Table of Contents

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

Why Motion?

Motion is an animation library for making beautiful animations.

🍦 Flavours

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.

JavaScript ⬇
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

Motion Examples offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kick‑start your next project.

⚡️ Motion+

Learn, Design, Build. Motion+ is a one-time fee, lifetime update membership that provides:

Get Motion+

🎨 Studio

Video of bezier curve editing

Motion Studio is a versatile suite of developer tools allowing you to:

Get started with Motion Studio.

👩🏻‍⚖️ License

💎 Contribute

✨ Sponsors

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

Partners

Framer

Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.

Framer

Platinum

Tailwind Linear

Gold

Vercel Liveblocks Luma Emil Kowalski

Silver

Frontend.fyi Firecrawl Puzzmo

Personal

Join libs.tech

...and unlock some superpowers

GitHub

We won't share your data with anyone else.