framer-motion 12.20.2 → 12.20.3

package/README.md

@@ -2,6 +2,10 @@
   <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 for React</h1>
+<h3 align="center">
+  An open source, production-ready animation library
+</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>
 
@@ -12,13 +16,11 @@
   <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 href="https://twitter.com/mattgperry" target="_blank">
+  <img src="https://img.shields.io/twitter/follow/mattgperry.svg?style=social&label=Follow"  />
   </a>
 </p>
 
-<br>
-<hr>
 <br>
 
 Motion for React is an open source, production-ready library that’s designed for all creative developers.
@@ -52,22 +54,47 @@ It does all this:
 
 ### 🐇 Quick start
 
-Install `motion` via your package manager:
-
-```
+```bash
 npm install motion
 ```
 
-Then import the `motion` component:
-
 ```jsx
 import { motion } from "motion/react"
 
-export function Component({ isVisible }) {
-    return <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
+function Component() {
+    return <motion.div animate={{ x: 100 }} />
 }
 ```
 
+Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
+
+## 🎨 Studio
+
+![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
+
+Motion Studio is a versatile suite of developer tools allowing you to:
+
+-   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).
+
+## 🎓 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+
+
+[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
+
+[Get Motion+](https://motion.dev/plus)
+
 ### 💎 Contribute
 
 -   Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-C4jfsA_8.js');
+var create = require('./create-ByDLj_LU.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-C4jfsA_8.js → create-ByDLj_LU.js}

@@ -1323,25 +1323,27 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                 this.nodes.forEach(clearIsLayoutDirty);
                 return;
             }
+            this.animationCommitId = this.animationId;
             if (!this.isUpdating) {
                 this.nodes.forEach(clearIsLayoutDirty);
             }
-            this.animationCommitId = this.animationId;
-            this.isUpdating = false;
-            /**
-             * Write
-             */
-            this.nodes.forEach(resetTransformStyle);
-            /**
-             * Read ==================
-             */
-            // Update layout measurements of updated children
-            this.nodes.forEach(updateLayout);
-            /**
-             * Write
-             */
-            // Notify listeners that the layout is updated
-            this.nodes.forEach(notifyLayoutUpdate);
+            else {
+                this.isUpdating = false;
+                /**
+                 * Write
+                 */
+                this.nodes.forEach(resetTransformStyle);
+                /**
+                 * Read ==================
+                 */
+                // Update layout measurements of updated children
+                this.nodes.forEach(updateLayout);
+                /**
+                 * Write
+                 */
+                // Notify listeners that the layout is updated
+                this.nodes.forEach(notifyLayoutUpdate);
+            }
             this.clearAllSnapshots();
             /**
              * Manually flush any pending updates. Ideally
@@ -1404,7 +1406,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
         updateLayout() {
             if (!this.instance)
                 return;
-            // TODO: Incorporate into a forwarded scroll offset
             this.updateScroll();
             if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
                 !this.isLayoutDirty) {
@@ -5093,6 +5094,11 @@ class PanGesture extends Feature {
  */
 const SwitchLayoutGroupContext = React.createContext({});
 
+/**
+ * Track whether we've taken any snapshots yet. If not,
+ * we can safely skip notification of didUpdate.
+ */
+let hasTakenAnySnapshot = false;
 class MeasureLayoutWithContext extends React.Component {
     /**
      * This only mounts projection nodes for components that
@@ -5109,7 +5115,9 @@ class MeasureLayoutWithContext extends React.Component {
             if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
                 switchLayoutGroup.register(projection);
             }
-            projection.root.didUpdate();
+            if (hasTakenAnySnapshot) {
+                projection.root.didUpdate();
+            }
             projection.addEventListener("animationComplete", () => {
                 this.safeToRemove();
             });
@@ -5133,6 +5141,7 @@ class MeasureLayoutWithContext extends React.Component {
          * perhaps in didUpdate
          */
         projection.isPresent = isPresent;
+        hasTakenAnySnapshot = true;
         if (drag ||
             prevProps.layoutDependency !== layoutDependency ||
             layoutDependency === undefined ||

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 create = require('./create-C4jfsA_8.js');
+var create = require('./create-ByDLj_LU.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -10,6 +10,11 @@ import { correctBorderRadius } from '../../../projection/styles/scale-border-rad
 import { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';
 import { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';
 
+/**
+ * Track whether we've taken any snapshots yet. If not,
+ * we can safely skip notification of didUpdate.
+ */
+let hasTakenAnySnapshot = false;
 class MeasureLayoutWithContext extends Component {
     /**
      * This only mounts projection nodes for components that
@@ -26,7 +31,9 @@ class MeasureLayoutWithContext extends Component {
             if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
                 switchLayoutGroup.register(projection);
             }
-            projection.root.didUpdate();
+            if (hasTakenAnySnapshot) {
+                projection.root.didUpdate();
+            }
             projection.addEventListener("animationComplete", () => {
                 this.safeToRemove();
             });
@@ -50,6 +57,7 @@ class MeasureLayoutWithContext extends Component {
          * perhaps in didUpdate
          */
         projection.isPresent = isPresent;
+        hasTakenAnySnapshot = true;
         if (drag ||
             prevProps.layoutDependency !== layoutDependency ||
             layoutDependency === undefined ||

package/dist/es/projection/node/create-projection-node.mjs

@@ -437,25 +437,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.nodes.forEach(clearIsLayoutDirty);
                 return;
             }
+            this.animationCommitId = this.animationId;
             if (!this.isUpdating) {
                 this.nodes.forEach(clearIsLayoutDirty);
             }
-            this.animationCommitId = this.animationId;
-            this.isUpdating = false;
-            /**
-             * Write
-             */
-            this.nodes.forEach(resetTransformStyle);
-            /**
-             * Read ==================
-             */
-            // Update layout measurements of updated children
-            this.nodes.forEach(updateLayout);
-            /**
-             * Write
-             */
-            // Notify listeners that the layout is updated
-            this.nodes.forEach(notifyLayoutUpdate);
+            else {
+                this.isUpdating = false;
+                /**
+                 * Write
+                 */
+                this.nodes.forEach(resetTransformStyle);
+                /**
+                 * Read ==================
+                 */
+                // Update layout measurements of updated children
+                this.nodes.forEach(updateLayout);
+                /**
+                 * Write
+                 */
+                // Notify listeners that the layout is updated
+                this.nodes.forEach(notifyLayoutUpdate);
+            }
             this.clearAllSnapshots();
             /**
              * Manually flush any pending updates. Ideally
@@ -518,7 +520,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         updateLayout() {
             if (!this.instance)
                 return;
-            // TODO: Incorporate into a forwarded scroll offset
             this.updateScroll();
             if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
                 !this.isLayoutDirty) {

package/dist/framer-motion.dev.js

@@ -6612,25 +6612,27 @@
                     this.nodes.forEach(clearIsLayoutDirty);
                     return;
                 }
+                this.animationCommitId = this.animationId;
                 if (!this.isUpdating) {
                     this.nodes.forEach(clearIsLayoutDirty);
                 }
-                this.animationCommitId = this.animationId;
-                this.isUpdating = false;
-                /**
-                 * Write
-                 */
-                this.nodes.forEach(resetTransformStyle);
-                /**
-                 * Read ==================
-                 */
-                // Update layout measurements of updated children
-                this.nodes.forEach(updateLayout);
-                /**
-                 * Write
-                 */
-                // Notify listeners that the layout is updated
-                this.nodes.forEach(notifyLayoutUpdate);
+                else {
+                    this.isUpdating = false;
+                    /**
+                     * Write
+                     */
+                    this.nodes.forEach(resetTransformStyle);
+                    /**
+                     * Read ==================
+                     */
+                    // Update layout measurements of updated children
+                    this.nodes.forEach(updateLayout);
+                    /**
+                     * Write
+                     */
+                    // Notify listeners that the layout is updated
+                    this.nodes.forEach(notifyLayoutUpdate);
+                }
                 this.clearAllSnapshots();
                 /**
                  * Manually flush any pending updates. Ideally
@@ -6693,7 +6695,6 @@
             updateLayout() {
                 if (!this.instance)
                     return;
-                // TODO: Incorporate into a forwarded scroll offset
                 this.updateScroll();
                 if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
                     !this.isLayoutDirty) {
@@ -10568,6 +10569,11 @@
      */
     const SwitchLayoutGroupContext = React$1.createContext({});
 
+    /**
+     * Track whether we've taken any snapshots yet. If not,
+     * we can safely skip notification of didUpdate.
+     */
+    let hasTakenAnySnapshot = false;
     class MeasureLayoutWithContext extends React$1.Component {
         /**
          * This only mounts projection nodes for components that
@@ -10584,7 +10590,9 @@
                 if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
                     switchLayoutGroup.register(projection);
                 }
-                projection.root.didUpdate();
+                if (hasTakenAnySnapshot) {
+                    projection.root.didUpdate();
+                }
                 projection.addEventListener("animationComplete", () => {
                     this.safeToRemove();
                 });
@@ -10608,6 +10616,7 @@
              * perhaps in didUpdate
              */
             projection.isPresent = isPresent;
+            hasTakenAnySnapshot = true;
             if (drag ||
                 prevProps.layoutDependency !== layoutDependency ||
                 layoutDependency === undefined ||