motion - npm Package Compare versions

Comparing version 12.20.2 to 12.20.3

package.json

 {
     "name": "motion",
-    "version": "12.20.2",
+    "version": "12.20.3",
     "description": "An animation library for JavaScript and React.",
@@ -79,3 +79,3 @@ "main": "dist/cjs/index.js",
     "dependencies": {
-        "framer-motion": "^12.20.2",
+        "framer-motion": "^12.20.3",
         "tslib": "^2.4.0"
@@ -99,3 +99,3 @@ },
     },
-    "gitHead": "fa6f186c8942834a10f7ba50e966d9ddc939e103"
+    "gitHead": "3e3203f3f75d61eb393b3ba4fe3f0ec1a5eae59d"
 }

README.md

 <p align="center">
- <img width="100" height="100" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
+  <img width="100" height="100" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
 </p>
 <h1 align="center">Motion</h1>
+<h3 align="center">
+  An open source animation library for JavaScript, React and Vue
+</h3>
 
 <br>
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/framer-motion" target="_blank">
-    <img src="https://img.shields.io/npm/v/framer-motion.svg?style=flat-square" />
-  </a>
-  <a href="https://www.npmjs.com/package/framer-motion" target="_blank">
-  <img src="https://img.shields.io/npm/dm/framer-motion.svg?style=flat-square" />
-  </a>
-  <a href="https://twitter.com/motiondotdev" target="_blank">
-  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
-  </a>
-</p>
+Motion is an animation library and suite of developer tools for making beautiful animations.
 
-<br>
-<hr>
-<br>
+It's the only library with first-class APIs for JS, React and Vue. It's also the only library with a **hybrid engine**, combining the power of JS animations with the performance of native browser APIs.
 
-Motion is an open source, production-ready library that’s designed for all creative developers.
+## 🍦 Flavours
 
-It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
+### JavaScript
 
-It looks like this:
+```javascript
+import { animate } from "motion"
 
-```jsx
-<motion.div animate={{ x: 0 }} />
+animate("#box", { x: 100 })
 ```
 
-It does all this:
+Get started with [JavaScript](https://motion.dev/docs/quick-start).
 
--   [Springs](https://motion.dev/docs/react-transitions#spring)
--   [Keyframes](https://motion.dev/docs/react-animation#keyframes)
--   [Layout animations](https://motion.dev/docs/react-layout-animations)
--   [Shared layout animations](https://motion.dev/docs/react-layout-animations#shared-layout-animations)
--   [Gestures (drag/tap/hover)](https://motion.dev/docs/react-gestures)
--   [Scroll animations](https://motion.dev/docs/react-scroll-animations)
--   [SVG paths](https://motion.dev/docs/react-animation#svg-line-drawing)
--   [Exit animations](https://motion.dev/docs/react-animation#exit-animations)
--   [Server-side rendering](https://motion.dev/docs/react-motion-component#server-side-rendering)
--   [Independent transforms](https://motion.dev/docs/react-motion-component#style)
--   [Orchestrate animations across components](https://motion.dev/docs/react-animation#orchestration)
--   [CSS variables](https://motion.dev/docs/react-animation#css-variables)
+### React
 
-...and a whole lot more.
+```bash
+npm install motion
+```
 
-## Get started
+```jsx
+import { motion } from "motion/react"
 
-### 🐇 Quick start
+function Component() {
+    return <motion.div animate={{ x: 100 }} />
+}
+```
 
-Install `motion` via your package manager:
+Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
 
+### Vue
+
+```html
+<script>
+    import { motion } from "motion-v"
+</script>
+
+<template> <motion.div :animate={{ x: 100 }} /> </template>
 ```
-npm install motion
-```
 
-#### JavaScript
+Get started with [Motion for Vue](https://motion.dev/docs/vue).
 
-Import the `animate` function:
+## 🎨 Studio
 
-```js
-import { animate } from "motion"
+![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
 
-animate("div", { scale: 1.2 })
-```
+Motion Studio is a versatile suite of developer tools allowing you to:
 
-[Get started](https://motion.dev/docs/quick-start)
+-   Visually edit CSS and Motion easing curves in VS Code
+-   Generate CSS springs with LLMs
+-   Load Motion docs into your LLM
 
-#### React
+Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
 
-Import the `motion` component:
+## 🎓 Examples
 
-```jsx
-import { motion } from "motion/react"
+[Motion Examples](https://examples.motion.dev) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kickstart your next project.
 
-export function Component({ isVisible }) {
-    return <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
-}
-```
+## ⚡️ Motion+
 
-[Get started](https://motion.dev/docs/react-quick-start)
+[Motion+](https://motion.dev/plus) is a one-time fee, lifetime membership that unlocks over 100 premium examples, early access, powerful Studio tools, a private Discord, and exclusive APIs like:
 
-### 💎 Contribute
+-   Cursor
+-   Ticker
+-   AnimateNumber
+-   splitText
 
--   Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
+[Get Motion+](https://motion.dev/plus)
 
-### 👩🏻‍⚖️ License
+## 👩🏻‍⚖️ License
 
 -   Motion is MIT licensed.
 
+## 💎 Contribute
+
+-   Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
+
 ## ✨ Sponsors
@@ -96,0 +91,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

401154

-0.12%

Number of lines in readme file

122

-3.94%

Dependency changes

• Updated

  framer-motion@^12.20.3