framer-motion 12.23.10 → 12.23.12

package/README.md

@@ -1,62 +1,46 @@
-<p align="center">
-  <img width="42" height="42" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
-</p>
-<h1 align="center">Motion for React</h1>
+
+<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for React</h1>
 <h3 align="center">
-  An open source, production-ready animation library
+  An open source animation library<br />for React
 </h3>
-<p align="center">Previously Framer Motion. Also available for <a href="https://github.com/motiondivision/motion/tree/main/packages/motion">JavaScript</a> and <a href="https://github.com/motiondivision/motion-vue">Vue</a></p>
-
-<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/mattgperry" target="_blank">
-  <img src="https://img.shields.io/twitter/follow/mattgperry.svg?style=social&label=Follow"  />
-  </a>
+  <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/motion?color=0368FF&label=version" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/framer-motion?color=8D30FF&label=npm" alt="npm downloads per month"></a>
+  <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/motion"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/framer-motion?logo=jsdeliver&color=FF4FBA"></a>
+  <img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
 </p>
 
-<br>
-
-Motion for React is an open source, production-ready library that’s designed for all creative developers.
 
-It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
+```bash
+npm install motion
+```
 
-It looks like this:
+## Table of Contents
 
-```jsx
-<motion.div animate={{ x: 0 }} />
-```
+1. [Why Motion?](#why-motion)
+2. [🍦 Flavours](#-flavours)
+3. [🎓 Examples](#-examples)
+4. [🎨 Studio](#-studio)
+5. [⚡️ Motion+](#-motion)
+6. [👩🏻‍⚖️ License](#-license)
+7. [💎 Contribute](#-contribute)
+8. [✨ Sponsors](#-sponsors)
 
-It does all this:
+## Why Motion?
 
--   [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)
+Motion is an animation library for making beautiful animations.
 
-...and a whole lot more.
+* The **only** library with first‑class APIs for React, JavaScript, **and** Vue.
+* Powered by a **hybrid engine** that blends JavaScript flexibility with native browser APIs for **120fps GPU‑accelerated** motion.
+* Tiny footprint, tree‑shakable, and fully TypeScript‑typed.
 
-## Get started
+## 🍦 Flavours
 
-### 🐇 Quick start
+Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
 
-```bash
-npm install motion
-```
+<details>
+<summary>React ⬇</summary>
 
 ```jsx
 import { motion } from "motion/react"
@@ -66,42 +50,72 @@ function Component() {
 }
 ```
 
-Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
+Get started with [Motion for React](https://motion.dev/docs/react).
 
-## 🎨 Studio
+</details>
 
-![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
+<details>
+<summary>JavaScript ⬇</summary>
 
-Motion Studio is a versatile suite of developer tools allowing you to:
+```javascript
+import { animate } from "motion"
 
--   Visually edit CSS and Motion easing curves in VS Code
--   Generate CSS springs with LLMs
--   Load Motion docs into your LLM
+animate("#box", { x: 100 })
+```
 
-Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
+Get started with [JavaScript](https://motion.dev/docs/quick-start).
+
+</details>
+
+<details>
+<summary>Vue ⬇</summary>
+
+```html
+<script>
+    import { motion } from "motion-v"
+</script>
+
+<template> <motion.div :animate={{ x: 100 }} /> </template>
+```
+
+Get started with [Motion for Vue](https://motion.dev/docs/vue).
+
+</details>
 
 ## 🎓 Examples
 
-[Motion Examples](https://examples.motion.dev/react) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kickstart your next project.
+[Motion Examples](https://motion.dev/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+
 
-[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:
-
--   Cursor
--   Ticker
--   AnimateNumber
--   splitText
+Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
+- 160+ premium Motion Examples
+- Motion UI features like Cursor and Ticker
+- Motion Studio animation editing for VS Code `alpha`
+- Early access content
+- Private Discord
 
 [Get Motion+](https://motion.dev/plus)
 
-### 💎 Contribute
+## 🎨 Studio
 
--   Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
+![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
 
-### 👩🏻‍⚖️ License
+Motion Studio is a versatile suite of developer tools allowing you to:
 
--   Motion for React is MIT licensed.
+-   Visually edit CSS and Motion easing curves in VS Code
+-   Generate CSS springs with LLMs
+-   Load Motion docs into your LLM
+
+Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
+
+## 👩🏻‍⚖️ 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
 
@@ -119,11 +133,11 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
 
 ### Platinum
 
-<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
+<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
 
 ### Gold
 
-<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
+<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a>
 
 ### Silver
 

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var featureBundle = require('./feature-bundle-CQ-jKhGL.js');
+var featureBundle = require('./feature-bundle-PNQ-8QDo.js');
 require('react');
 require('motion-dom');
 require('motion-utils');

package/dist/cjs/dom.js

@@ -986,8 +986,7 @@ class VisualElement {
         if (process.env.NODE_ENV !== "production") {
             motionUtils.warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
         }
-        if (this.parent)
-            this.parent.children.add(this);
+        this.parent?.addChild(this);
         this.update(this.props, this.presenceContext);
     }
     unmount() {
@@ -997,7 +996,7 @@ class VisualElement {
         this.valueSubscriptions.forEach((remove) => remove());
         this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
-        this.parent && this.parent.children.delete(this);
+        this.parent?.removeChild(this);
         for (const key in this.events) {
             this.events[key].clear();
         }
@@ -1010,6 +1009,15 @@ class VisualElement {
         }
         this.current = null;
     }
+    addChild(child) {
+        this.children.add(child);
+        this.enteringChildren ?? (this.enteringChildren = new Set());
+        this.enteringChildren.add(child);
+    }
+    removeChild(child) {
+        this.children.delete(child);
+        this.enteringChildren && this.enteringChildren.delete(child);
+    }
     bindToMotionValue(key, value) {
         if (this.valueSubscriptions.has(key)) {
             this.valueSubscriptions.get(key)();

package/dist/cjs/{feature-bundle-CQ-jKhGL.js → feature-bundle-PNQ-8QDo.js}

@@ -2960,8 +2960,7 @@ class VisualElement {
         if (process.env.NODE_ENV !== "production") {
             motionUtils.warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
         }
-        if (this.parent)
-            this.parent.children.add(this);
+        this.parent?.addChild(this);
         this.update(this.props, this.presenceContext);
     }
     unmount() {
@@ -2971,7 +2970,7 @@ class VisualElement {
         this.valueSubscriptions.forEach((remove) => remove());
         this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
-        this.parent && this.parent.children.delete(this);
+        this.parent?.removeChild(this);
         for (const key in this.events) {
             this.events[key].clear();
         }
@@ -2984,6 +2983,15 @@ class VisualElement {
         }
         this.current = null;
     }
+    addChild(child) {
+        this.children.add(child);
+        this.enteringChildren ?? (this.enteringChildren = new Set());
+        this.enteringChildren.add(child);
+    }
+    removeChild(child) {
+        this.children.delete(child);
+        this.enteringChildren && this.enteringChildren.delete(child);
+    }
     bindToMotionValue(key, value) {
         if (this.valueSubscriptions.has(key)) {
             this.valueSubscriptions.get(key)();
@@ -4183,6 +4191,11 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
             });
             wantsHandoff.current = false;
         }
+        /**
+         * Now we've finished triggering animations for this element we
+         * can wipe the enteringChildren set for the next render.
+         */
+        visualElement.enteringChildren = undefined;
     });
     return visualElement;
 }
@@ -4436,6 +4449,20 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
     return animations;
 }
 
+function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
+    const index = Array.from(children)
+        .sort((a, b) => a.sortNodePosition(b))
+        .indexOf(child);
+    const numChildren = children.size;
+    const maxStaggerDuration = (numChildren - 1) * staggerChildren;
+    const delayIsFunction = typeof delayChildren === "function";
+    return delayIsFunction
+        ? delayChildren(index, numChildren)
+        : staggerDirection === 1
+            ? index * staggerChildren
+            : maxStaggerDuration - index * staggerChildren;
+}
+
 function animateVariant(visualElement, variant, options = {}) {
     const resolved = resolveVariant(visualElement, variant, options.type === "exit"
         ? visualElement.presenceContext?.custom
@@ -4478,31 +4505,17 @@ function animateVariant(visualElement, variant, options = {}) {
 }
 function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
     const animations = [];
-    const numChildren = visualElement.variantChildren.size;
-    const maxStaggerDuration = (numChildren - 1) * staggerChildren;
-    const delayIsFunction = typeof delayChildren === "function";
-    const generateStaggerDuration = delayIsFunction
-        ? (i) => delayChildren(i, numChildren)
-        : // Support deprecated staggerChildren
-            staggerDirection === 1
-                ? (i = 0) => i * staggerChildren
-                : (i = 0) => maxStaggerDuration - i * staggerChildren;
-    Array.from(visualElement.variantChildren)
-        .sort(sortByTreeOrder)
-        .forEach((child, i) => {
+    for (const child of visualElement.variantChildren) {
         child.notify("AnimationStart", variant);
         animations.push(animateVariant(child, variant, {
             ...options,
             delay: delay +
-                (delayIsFunction ? 0 : delayChildren) +
-                generateStaggerDuration(i),
+                (typeof delayChildren === "function" ? 0 : delayChildren) +
+                calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection),
         }).then(() => child.notify("AnimationComplete", variant)));
-    });
+    }
     return Promise.all(animations);
 }
-function sortByTreeOrder(a, b) {
-    return a.sortNodePosition(b);
-}
 
 function animateVisualElement(visualElement, definition, options = {}) {
     visualElement.notify("AnimationStart", definition);
@@ -4655,9 +4668,6 @@ function createAnimationState(visualElement) {
             let isInherited = prop === context[type] &&
                 prop !== props[type] &&
                 propIsVariant;
-            /**
-             *
-             */
             if (isInherited &&
                 isInitialRender &&
                 visualElement.manuallyAnimateOnMount) {
@@ -4778,9 +4788,6 @@ function createAnimationState(visualElement) {
              */
             typeState.prevProp = prop;
             typeState.prevResolvedValues = resolvedValues;
-            /**
-             *
-             */
             if (typeState.isActive) {
                 encounteredKeys = { ...encounteredKeys, ...resolvedValues };
             }
@@ -4794,10 +4801,30 @@ function createAnimationState(visualElement) {
             const willAnimateViaParent = isInherited && variantDidChange;
             const needsAnimating = !willAnimateViaParent || handledRemovedValues;
             if (shouldAnimateType && needsAnimating) {
-                animations.push(...definitionList.map((animation) => ({
-                    animation: animation,
-                    options: { type },
-                })));
+                animations.push(...definitionList.map((animation) => {
+                    const options = { type };
+                    /**
+                     * If we're performing the initial animation, but we're not
+                     * rendering at the same time as the variant-controlling parent,
+                     * we want to use the parent's transition to calculate the stagger.
+                     */
+                    if (typeof animation === "string" &&
+                        isInitialRender &&
+                        !willAnimateViaParent &&
+                        visualElement.manuallyAnimateOnMount &&
+                        visualElement.parent) {
+                        const { parent } = visualElement;
+                        const parentVariant = resolveVariant(parent, animation);
+                        if (parent.enteringChildren && parentVariant) {
+                            const { delayChildren } = parentVariant.transition || {};
+                            options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
+                        }
+                    }
+                    return {
+                        animation: animation,
+                        options,
+                    };
+                }));
             }
         }
         /**

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var featureBundle = require('./feature-bundle-CQ-jKhGL.js');
+var featureBundle = require('./feature-bundle-PNQ-8QDo.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 

package/dist/cjs/m.js

@@ -909,6 +909,11 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
             });
             wantsHandoff.current = false;
         }
+        /**
+         * Now we've finished triggering animations for this element we
+         * can wipe the enteringChildren set for the next render.
+         */
+        visualElement.enteringChildren = undefined;
     });
     return visualElement;
 }