framer-motion 11.2.6 → 11.2.7

package/dist/index.d.ts

@@ -1365,6 +1365,7 @@ interface IProjectionNode<I = unknown> {
     setAnimationOrigin(delta: Delta): void;
     startAnimation(transition: Transition$1): void;
     finishAnimation(): void;
+    hasCheckedOptimisedAppear: boolean;
     isLead(): boolean;
     promote(options?: {
         needsReset?: boolean;

package/dist/projection.dev.js

@@ -1013,7 +1013,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "11.2.6";
+            this.version = "11.2.7";
             /**
              * Tracks whether this value can output a velocity. Currently this is only true
              * if the value is numerical, but we might be able to widen the scope here and support
@@ -3937,6 +3937,18 @@
         return definition;
     }
 
+    /**
+     * Convert camelCase to dash-case properties.
+     */
+    const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
+
+    const optimizedAppearDataId = "framerAppearId";
+    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
+    function getOptimisedAppearId(visualElement) {
+        return visualElement.getProps()[optimizedAppearDataAttribute];
+    }
+
     function isSVGElement(element) {
         return element instanceof SVGElement && element.tagName !== "svg";
     }
@@ -4042,7 +4054,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.2.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.6 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.2.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.7 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -4904,6 +4916,25 @@
             }
         }
     }
+    function isOptimisedAppearTree(projectionNode) {
+        projectionNode.hasCheckedOptimisedAppear = true;
+        if (projectionNode.root === projectionNode)
+            return false;
+        const { visualElement } = projectionNode.options;
+        if (!visualElement) {
+            return false;
+        }
+        else if (getOptimisedAppearId(visualElement)) {
+            return true;
+        }
+        else if (projectionNode.parent &&
+            !projectionNode.parent.hasCheckedOptimisedAppear) {
+            return isOptimisedAppearTree(projectionNode.parent);
+        }
+        else {
+            return false;
+        }
+    }
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
         return class ProjectionNode {
             constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
@@ -4979,6 +5010,13 @@
                  * Flags whether this node should have its transform reset prior to measuring.
                  */
                 this.shouldResetTransform = false;
+                /**
+                 * Store whether this node has been checked for optimised appear animations. As
+                 * effects fire bottom-up, and we want to look up the tree for appear animations,
+                 * this makes sure we only check each path once, stopping at nodes that
+                 * have already been checked.
+                 */
+                this.hasCheckedOptimisedAppear = false;
                 /**
                  * An object representing the calculated contextual/accumulated/tree scale.
                  * This will be used to scale calculcated projection transforms, as these are
@@ -5184,15 +5222,6 @@
                 if (this.isUpdateBlocked())
                     return;
                 this.isUpdating = true;
-                /**
-                 * If we're running optimised appear animations then these must be
-                 * cancelled before measuring the DOM. This is so we can measure
-                 * the true layout of the element rather than the WAAPI animation
-                 * which will be unaffected by the resetSkewAndRotate step.
-                 */
-                if (window.HandoffCancelAllAnimations) {
-                    window.HandoffCancelAllAnimations();
-                }
                 this.nodes && this.nodes.forEach(resetSkewAndRotation);
                 this.animationId++;
             }
@@ -5206,6 +5235,22 @@
                     this.options.onExitComplete && this.options.onExitComplete();
                     return;
                 }
+                /**
+                 * If we're running optimised appear animations then these must be
+                 * cancelled before measuring the DOM. This is so we can measure
+                 * the true layout of the element rather than the WAAPI animation
+                 * which will be unaffected by the resetSkewAndRotate step.
+                 *
+                 * Note: This is a DOM write. Worst case scenario is this is sandwiched
+                 * between other snapshot reads which will cause unnecessary style recalculations.
+                 * This has to happen here though, as we don't yet know which nodes will need
+                 * snapshots in startUpdate(), but we only want to cancel optimised animations
+                 * if a layout animation measurement is actually going to be affected by them.
+                 */
+                if (window.HandoffCancelAllAnimations &&
+                    isOptimisedAppearTree(this)) {
+                    window.HandoffCancelAllAnimations();
+                }
                 !this.root.isUpdating && this.root.startUpdate();
                 if (this.isLayoutDirty)
                     return;

package/dist/three-entry.d.ts

@@ -1081,6 +1081,7 @@ interface IProjectionNode<I = unknown> {
     setAnimationOrigin(delta: Delta): void;
     startAnimation(transition: Transition$1): void;
     finishAnimation(): void;
+    hasCheckedOptimisedAppear: boolean;
     isLead(): boolean;
     promote(options?: {
         needsReset?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "11.2.6",
+    "version": "11.2.7",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -87,7 +87,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "32.83 kB"
+            "maxSize": "33 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -99,7 +99,7 @@
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "28.2 kB"
+            "maxSize": "28.3 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
@@ -115,8 +115,8 @@
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "34.1 kB"
+            "maxSize": "34.3 kB"
         }
     ],
-    "gitHead": "9f5a5da4d09fbc34889c19b0af4a04fb2b17a2e5"
+    "gitHead": "9f47af2f738d750528fff1367448e969dd04be29"
 }