framer-motion 12.23.24 → 12.23.25

package/README.md

@@ -108,21 +108,27 @@ Motion is sustainable thanks to the kind support of its sponsors.
 
 [Become a sponsor](https://motion.dev/sponsor)
 
-### Partner
+### Partners
 
-Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
+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.
 
 <a href="https://framer.link/FlnUbQY">
   <img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">
 </a>
 
+Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.
+
+<a href="https://cursor.com">
+  <img alt="Cursor" src="https://github.com/user-attachments/assets/81c482d3-c2c2-4b35-bbcf-933b28d5b448" width="250px" height="150px" />
+</a>
+
 ### Platinum
 
-<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a>
+<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a> <a href="https://animations.dev"><img alt="Sanity" src="https://github.com/user-attachments/assets/7c5ab87d-c7d9-44b4-9c7e-f9e6a9f3ba3b" width="250px" height="150px"></a>
 
 ### Gold
 
-<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="200px" height="120px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="200px" height="120px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a> <a href="https://notion.com"><img alt="Notion" src="https://github.com/user-attachments/assets/a27a6033-3cb0-4232-a6bb-625e1824517b" width="200px" height="120px"></a> <a href="https://lottiefiles.com"><img alt="LottieFiles" src="https://github.com/user-attachments/assets/4e99d8c7-4cba-43ee-93c5-93861ae708ec" width="200px" height="120px"></a>
+<a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a> <a href="https://notion.com"><img alt="Notion" src="https://github.com/user-attachments/assets/a27a6033-3cb0-4232-a6bb-625e1824517b" width="200px" height="120px"></a> <a href="https://lottiefiles.com"><img alt="LottieFiles" src="https://github.com/user-attachments/assets/4e99d8c7-4cba-43ee-93c5-93861ae708ec" width="200px" height="120px"></a>
 
 ### Silver
 

package/dist/cjs/client.js

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

package/dist/cjs/{feature-bundle-v2Gb94eA.js → feature-bundle-DUrrFqHS.js}

@@ -1042,6 +1042,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
              */
             this.eventHandlers = new Map();
             this.hasTreeAnimated = false;
+            this.layoutVersion = 0;
             // Note: Currently only running on root node
             this.updateScheduled = false;
             this.scheduleUpdate = () => this.update();
@@ -1081,6 +1082,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
              * Frame calculations
              */
             this.resolvedRelativeTargetAt = 0.0;
+            this.linkedParentVersion = 0;
             this.hasProjected = false;
             this.isVisible = true;
             this.animationProgress = 0;
@@ -1434,6 +1436,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             }
             const prevLayout = this.layout;
             this.layout = this.measure(false);
+            this.layoutVersion++;
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
@@ -1653,25 +1656,23 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             if (!this.layout || !(layout || layoutId))
                 return;
             this.resolvedRelativeTargetAt = motionDom.frameData.timestamp;
+            const relativeParent = this.getClosestProjectingParent();
+            if (relativeParent &&
+                this.linkedParentVersion !== relativeParent.layoutVersion &&
+                !relativeParent.options.layoutRoot) {
+                this.removeRelativeTarget();
+            }
             /**
              * If we don't have a targetDelta but do have a layout, we can attempt to resolve
              * a relativeParent. This will allow a component to perform scale correction
              * even if no animation has started.
              */
             if (!this.targetDelta && !this.relativeTarget) {
-                const relativeParent = this.getClosestProjectingParent();
-                if (relativeParent &&
-                    relativeParent.layout &&
-                    this.animationProgress !== 1) {
-                    this.relativeParent = relativeParent;
-                    this.forceRelativeParentToResolveTarget();
-                    this.relativeTarget = createBox();
-                    this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
-                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                if (relativeParent && relativeParent.layout) {
+                    this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
                 }
                 else {
-                    this.relativeParent = this.relativeTarget = undefined;
+                    this.removeRelativeTarget();
                 }
             }
             /**
@@ -1721,19 +1722,13 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
              */
             if (this.attemptToResolveRelativeTarget) {
                 this.attemptToResolveRelativeTarget = false;
-                const relativeParent = this.getClosestProjectingParent();
                 if (relativeParent &&
                     Boolean(relativeParent.resumingFrom) ===
                         Boolean(this.resumingFrom) &&
                     !relativeParent.options.layoutScroll &&
                     relativeParent.target &&
                     this.animationProgress !== 1) {
-                    this.relativeParent = relativeParent;
-                    this.forceRelativeParentToResolveTarget();
-                    this.relativeTarget = createBox();
-                    this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
-                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                    this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
                 }
                 else {
                     this.relativeParent = this.relativeTarget = undefined;
@@ -1765,6 +1760,18 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                 this.options.layoutRoot) &&
                 this.layout);
         }
+        createRelativeTarget(relativeParent, layout, parentLayout) {
+            this.relativeParent = relativeParent;
+            this.linkedParentVersion = relativeParent.layoutVersion;
+            this.forceRelativeParentToResolveTarget();
+            this.relativeTarget = createBox();
+            this.relativeTargetOrigin = createBox();
+            calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout);
+            copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+        }
+        removeRelativeTarget() {
+            this.relativeParent = this.relativeTarget = undefined;
+        }
         calcProjection() {
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;

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-v2Gb94eA.js');
+var featureBundle = require('./feature-bundle-DUrrFqHS.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 

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

@@ -8,7 +8,7 @@ import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { mixValues } from '../animation/mix-values.mjs';
 import { copyBoxInto, copyAxisDeltaInto } from '../geometry/copy.mjs';
 import { translateAxis, transformBox, applyBoxDelta, applyTreeDeltas } from '../geometry/delta-apply.mjs';
-import { calcLength, calcRelativePosition, calcRelativeBox, calcBoxDelta, isNear } from '../geometry/delta-calc.mjs';
+import { calcLength, calcRelativeBox, calcRelativePosition, calcBoxDelta, isNear } from '../geometry/delta-calc.mjs';
 import { removeBoxTransforms } from '../geometry/delta-remove.mjs';
 import { createBox, createDelta } from '../geometry/models.mjs';
 import { boxEqualsRounded, isDeltaZero, axisDeltaEquals, aspectRatio, boxEquals } from '../geometry/utils.mjs';
@@ -156,6 +156,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             this.eventHandlers = new Map();
             this.hasTreeAnimated = false;
+            this.layoutVersion = 0;
             // Note: Currently only running on root node
             this.updateScheduled = false;
             this.scheduleUpdate = () => this.update();
@@ -195,6 +196,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * Frame calculations
              */
             this.resolvedRelativeTargetAt = 0.0;
+            this.linkedParentVersion = 0;
             this.hasProjected = false;
             this.isVisible = true;
             this.animationProgress = 0;
@@ -548,6 +550,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             const prevLayout = this.layout;
             this.layout = this.measure(false);
+            this.layoutVersion++;
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
@@ -767,25 +770,23 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (!this.layout || !(layout || layoutId))
                 return;
             this.resolvedRelativeTargetAt = frameData.timestamp;
+            const relativeParent = this.getClosestProjectingParent();
+            if (relativeParent &&
+                this.linkedParentVersion !== relativeParent.layoutVersion &&
+                !relativeParent.options.layoutRoot) {
+                this.removeRelativeTarget();
+            }
             /**
              * If we don't have a targetDelta but do have a layout, we can attempt to resolve
              * a relativeParent. This will allow a component to perform scale correction
              * even if no animation has started.
              */
             if (!this.targetDelta && !this.relativeTarget) {
-                const relativeParent = this.getClosestProjectingParent();
-                if (relativeParent &&
-                    relativeParent.layout &&
-                    this.animationProgress !== 1) {
-                    this.relativeParent = relativeParent;
-                    this.forceRelativeParentToResolveTarget();
-                    this.relativeTarget = createBox();
-                    this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
-                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                if (relativeParent && relativeParent.layout) {
+                    this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
                 }
                 else {
-                    this.relativeParent = this.relativeTarget = undefined;
+                    this.removeRelativeTarget();
                 }
             }
             /**
@@ -835,19 +836,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             if (this.attemptToResolveRelativeTarget) {
                 this.attemptToResolveRelativeTarget = false;
-                const relativeParent = this.getClosestProjectingParent();
                 if (relativeParent &&
                     Boolean(relativeParent.resumingFrom) ===
                         Boolean(this.resumingFrom) &&
                     !relativeParent.options.layoutScroll &&
                     relativeParent.target &&
                     this.animationProgress !== 1) {
-                    this.relativeParent = relativeParent;
-                    this.forceRelativeParentToResolveTarget();
-                    this.relativeTarget = createBox();
-                    this.relativeTargetOrigin = createBox();
-                    calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
-                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                    this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
                 }
                 else {
                     this.relativeParent = this.relativeTarget = undefined;
@@ -879,6 +874,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.options.layoutRoot) &&
                 this.layout);
         }
+        createRelativeTarget(relativeParent, layout, parentLayout) {
+            this.relativeParent = relativeParent;
+            this.linkedParentVersion = relativeParent.layoutVersion;
+            this.forceRelativeParentToResolveTarget();
+            this.relativeTarget = createBox();
+            this.relativeTargetOrigin = createBox();
+            calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout);
+            copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+        }
+        removeRelativeTarget() {
+            this.relativeParent = this.relativeTarget = undefined;
+        }
         calcProjection() {
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;

package/dist/framer-motion.dev.js

@@ -6445,6 +6445,7 @@
                  */
                 this.eventHandlers = new Map();
                 this.hasTreeAnimated = false;
+                this.layoutVersion = 0;
                 // Note: Currently only running on root node
                 this.updateScheduled = false;
                 this.scheduleUpdate = () => this.update();
@@ -6484,6 +6485,7 @@
                  * Frame calculations
                  */
                 this.resolvedRelativeTargetAt = 0.0;
+                this.linkedParentVersion = 0;
                 this.hasProjected = false;
                 this.isVisible = true;
                 this.animationProgress = 0;
@@ -6837,6 +6839,7 @@
                 }
                 const prevLayout = this.layout;
                 this.layout = this.measure(false);
+                this.layoutVersion++;
                 this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
                 this.projectionDelta = undefined;
@@ -7056,25 +7059,23 @@
                 if (!this.layout || !(layout || layoutId))
                     return;
                 this.resolvedRelativeTargetAt = frameData.timestamp;
+                const relativeParent = this.getClosestProjectingParent();
+                if (relativeParent &&
+                    this.linkedParentVersion !== relativeParent.layoutVersion &&
+                    !relativeParent.options.layoutRoot) {
+                    this.removeRelativeTarget();
+                }
                 /**
                  * If we don't have a targetDelta but do have a layout, we can attempt to resolve
                  * a relativeParent. This will allow a component to perform scale correction
                  * even if no animation has started.
                  */
                 if (!this.targetDelta && !this.relativeTarget) {
-                    const relativeParent = this.getClosestProjectingParent();
-                    if (relativeParent &&
-                        relativeParent.layout &&
-                        this.animationProgress !== 1) {
-                        this.relativeParent = relativeParent;
-                        this.forceRelativeParentToResolveTarget();
-                        this.relativeTarget = createBox();
-                        this.relativeTargetOrigin = createBox();
-                        calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
-                        copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                    if (relativeParent && relativeParent.layout) {
+                        this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
                     }
                     else {
-                        this.relativeParent = this.relativeTarget = undefined;
+                        this.removeRelativeTarget();
                     }
                 }
                 /**
@@ -7124,19 +7125,13 @@
                  */
                 if (this.attemptToResolveRelativeTarget) {
                     this.attemptToResolveRelativeTarget = false;
-                    const relativeParent = this.getClosestProjectingParent();
                     if (relativeParent &&
                         Boolean(relativeParent.resumingFrom) ===
                             Boolean(this.resumingFrom) &&
                         !relativeParent.options.layoutScroll &&
                         relativeParent.target &&
                         this.animationProgress !== 1) {
-                        this.relativeParent = relativeParent;
-                        this.forceRelativeParentToResolveTarget();
-                        this.relativeTarget = createBox();
-                        this.relativeTargetOrigin = createBox();
-                        calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
-                        copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                        this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
                     }
                     else {
                         this.relativeParent = this.relativeTarget = undefined;
@@ -7168,6 +7163,18 @@
                     this.options.layoutRoot) &&
                     this.layout);
             }
+            createRelativeTarget(relativeParent, layout, parentLayout) {
+                this.relativeParent = relativeParent;
+                this.linkedParentVersion = relativeParent.layoutVersion;
+                this.forceRelativeParentToResolveTarget();
+                this.relativeTarget = createBox();
+                this.relativeTargetOrigin = createBox();
+                calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout);
+                copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+            }
+            removeRelativeTarget() {
+                this.relativeParent = this.relativeTarget = undefined;
+            }
             calcProjection() {
                 const lead = this.getLead();
                 const isShared = Boolean(this.resumingFrom) || this !== lead;