framer-motion 11.3.30 → 11.3.31-alpha.0

package/dist/cjs/dom-entry.js

@@ -279,7 +279,7 @@ class MotionValue {
          * 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.3.30";
+        this.version = "11.3.31-alpha.0";
         /**
          * 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
@@ -3525,7 +3525,7 @@ const optimizedAppearDataId = "framerAppearId";
 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
 function getOptimisedAppearId(visualElement) {
-    return visualElement.getProps()[optimizedAppearDataAttribute];
+    return visualElement.props[optimizedAppearDataAttribute];
 }
 
 function getWillChangeName(name) {
@@ -3790,7 +3790,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.30", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.30 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.31-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.31-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4016,7 +4016,11 @@ class VisualElement {
         if (this.parent && this.isVariantNode && !this.isControllingVariants) {
             this.removeFromVariantTree = this.parent.addVariantChild(this);
         }
-        this.values.forEach((value, key) => this.bindToMotionValue(key, value));
+        this.values.forEach((value, key) => {
+            if (!this.valueSubscriptions.has(key)) {
+                this.bindToMotionValue(key, value);
+            }
+        });
         if (!hasReducedMotionListener.current) {
             initPrefersReducedMotion();
         }
@@ -4039,6 +4043,7 @@ class VisualElement {
         cancelFrame(this.notifyUpdate);
         cancelFrame(this.render);
         this.valueSubscriptions.forEach((remove) => remove());
+        this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
         this.parent && this.parent.children.delete(this);
         for (const key in this.events) {
@@ -4066,9 +4071,15 @@ class VisualElement {
             }
         });
         const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
+        let removeSyncCheck;
+        if (window.MotionCheckAppearSync) {
+            removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
+        }
         this.valueSubscriptions.set(key, () => {
             removeOnChange();
             removeOnRenderRequest();
+            if (removeSyncCheck)
+                removeSyncCheck();
             if (value.owner)
                 value.stop();
         });

package/dist/cjs/index.js

@@ -4862,7 +4862,7 @@ class MotionValue {
          * 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.3.30";
+        this.version = "11.3.31-alpha.0";
         /**
          * 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
@@ -5167,7 +5167,7 @@ function setTarget(visualElement, definition) {
 }
 
 function getOptimisedAppearId(visualElement) {
-    return visualElement.getProps()[optimizedAppearDataAttribute];
+    return visualElement.props[optimizedAppearDataAttribute];
 }
 
 class WillChangeMotionValue extends MotionValue {
@@ -7323,7 +7323,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.30", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.30 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.31-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.31-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7516,7 +7516,11 @@ class VisualElement {
         if (this.parent && this.isVariantNode && !this.isControllingVariants) {
             this.removeFromVariantTree = this.parent.addVariantChild(this);
         }
-        this.values.forEach((value, key) => this.bindToMotionValue(key, value));
+        this.values.forEach((value, key) => {
+            if (!this.valueSubscriptions.has(key)) {
+                this.bindToMotionValue(key, value);
+            }
+        });
         if (!hasReducedMotionListener.current) {
             initPrefersReducedMotion();
         }
@@ -7539,6 +7543,7 @@ class VisualElement {
         cancelFrame(this.notifyUpdate);
         cancelFrame(this.render);
         this.valueSubscriptions.forEach((remove) => remove());
+        this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
         this.parent && this.parent.children.delete(this);
         for (const key in this.events) {
@@ -7566,9 +7571,15 @@ class VisualElement {
             }
         });
         const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
+        let removeSyncCheck;
+        if (window.MotionCheckAppearSync) {
+            removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
+        }
         this.valueSubscriptions.set(key, () => {
             removeOnChange();
             removeOnRenderRequest();
+            if (removeSyncCheck)
+                removeSyncCheck();
             if (value.owner)
                 value.stop();
         });
@@ -8969,8 +8980,9 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
     if (!visualElement)
         return;
     const appearId = getOptimisedAppearId(visualElement);
-    if (window.MotionHasOptimisedTransformAnimation(appearId)) {
-        window.MotionCancelOptimisedTransform(appearId);
+    if (window.MotionHasOptimisedAnimation(appearId, "transform")) {
+        const { layout, layoutId } = projectionNode.options;
+        window.MotionCancelOptimisedAnimation(appearId, "transform", frame, !(layout || layoutId));
     }
     const { parent } = projectionNode;
     if (parent && !parent.hasCheckedOptimisedAppear) {
@@ -9298,7 +9310,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * 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.MotionCancelOptimisedTransform &&
+            if (window.MotionCancelOptimisedAnimation &&
                 !this.hasCheckedOptimisedAppear) {
                 cancelTreeOptimisedTransformAnimations(this);
             }
@@ -12181,21 +12193,33 @@ function useResetProjection() {
     return reset;
 }
 
-const appearStoreId = (id, value) => `${id}: ${value}`;
+const appearStoreId = (elementId, valueName) => {
+    const key = transformProps.has(valueName) ? "transform" : valueName;
+    return `${elementId}: ${key}`;
+};
 
 const appearAnimationStore = new Map();
 const elementsWithAppearAnimations = new Set();
 
 function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
-    const optimisedValueName = transformProps.has(valueName)
-        ? "transform"
-        : valueName;
-    const storeId = appearStoreId(elementId, optimisedValueName);
+    const storeId = appearStoreId(elementId, valueName);
     const optimisedAnimation = appearAnimationStore.get(storeId);
     if (!optimisedAnimation) {
         return null;
     }
     const { animation, startTime } = optimisedAnimation;
+    function cancelAnimation() {
+        var _a;
+        (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, elementId, valueName, frame);
+    }
+    /**
+     * We can cancel the animation once it's finished now that we've synced
+     * with Motion.
+     *
+     * Prefer onfinish over finished as onfinish is backwards compatible with
+     * older browsers.
+     */
+    animation.onfinish = cancelAnimation;
     if (startTime === null || window.MotionHandoffIsComplete) {
         /**
          * If the startTime is null, this animation is the Paint Ready detection animation
@@ -12204,13 +12228,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
          * Or if we've already handed off the animation then we're now interrupting it.
          * In which case we need to cancel it.
          */
-        appearAnimationStore.delete(storeId);
-        frame.render(() => frame.render(() => {
-            try {
-                animation.cancel();
-            }
-            catch (error) { }
-        }));
+        cancelAnimation();
         return null;
     }
     else {
@@ -12231,6 +12249,18 @@ let startFrameTime;
  * https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
  */
 let readyAnimation;
+/**
+ * Keep track of animations that were suspended vs cancelled so we
+ * can easily resume them when we're done measuring layout.
+ */
+const suspendedAnimations = new Set();
+function resumeSuspendedAnimations() {
+    suspendedAnimations.forEach((data) => {
+        data.animation.play();
+        data.animation.startTime = data.startTime;
+    });
+    suspendedAnimations.clear();
+}
 function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
     // Prevent optimised appear animations if Motion has already started animating.
     if (window.MotionHandoffIsComplete) {
@@ -12258,10 +12288,22 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
          * of handoff animations.
          */
         window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
-        window.MotionHasOptimisedTransformAnimation = (elementId) => {
+        window.MotionHasOptimisedAnimation = (elementId, valueName) => {
             if (!elementId)
                 return false;
-            const animationId = appearStoreId(elementId, "transform");
+            /**
+             * Keep a map of elementIds that have started animating. We check
+             * via ID instead of Element because of hydration errors and
+             * pre-hydration checks. We also actively record IDs as they start
+             * animating rather than simply checking for data-appear-id as
+             * this attrbute might be present but not lead to an animation, for
+             * instance if the element's appear animation is on a different
+             * breakpoint.
+             */
+            if (!valueName) {
+                return elementsWithAppearAnimations.has(elementId);
+            }
+            const animationId = appearStoreId(elementId, valueName);
             return Boolean(appearAnimationStore.get(animationId));
         };
         /**
@@ -12269,24 +12311,59 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
          * they're the ones that will interfere with the
          * layout animation measurements.
          */
-        window.MotionCancelOptimisedTransform = (elementId) => {
-            const animationId = appearStoreId(elementId, "transform");
+        window.MotionCancelOptimisedAnimation = (elementId, valueName, frame, canResume) => {
+            const animationId = appearStoreId(elementId, valueName);
             const data = appearAnimationStore.get(animationId);
-            if (data) {
+            if (!data)
+                return;
+            if (frame && canResume === undefined) {
+                /**
+                 * Wait until the end of the subsequent frame to cancel the animation
+                 * to ensure we don't remove the animation before the main thread has
+                 * had a chance to resolve keyframes and render.
+                 */
+                frame.postRender(() => {
+                    frame.postRender(() => {
+                        data.animation.cancel();
+                    });
+                });
+            }
+            else {
                 data.animation.cancel();
+            }
+            if (frame && canResume) {
+                suspendedAnimations.add(data);
+                frame.render(resumeSuspendedAnimations);
+            }
+            else {
                 appearAnimationStore.delete(animationId);
+                /**
+                 * If there are no more animations left, we can remove the cancel function.
+                 * This will let us know when we can stop checking for conflicting layout animations.
+                 */
+                if (!appearAnimationStore.size) {
+                    window.MotionCancelOptimisedAnimation = undefined;
+                }
             }
         };
-        /**
-         * Keep a map of elementIds that have started animating. We check
-         * via ID instead of Element because of hydration errors and
-         * pre-hydration checks. We also actively record IDs as they start
-         * animating rather than simply checking for data-appear-id as
-         * this attrbute might be present but not lead to an animation, for
-         * instance if the element's appear animation is on a different
-         * breakpoint.
-         */
-        window.MotionHasOptimisedAnimation = (elementId) => Boolean(elementId && elementsWithAppearAnimations.has(elementId));
+        window.MotionCheckAppearSync = (visualElement, valueName, value) => {
+            var _a, _b;
+            const appearId = getOptimisedAppearId(visualElement);
+            if (!appearId)
+                return;
+            const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+            const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
+            if (!valueIsOptimised || !externalAnimationValue)
+                return;
+            const removeSyncCheck = value.on("change", (latestValue) => {
+                var _a;
+                if (externalAnimationValue.get() !== latestValue) {
+                    (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+                    removeSyncCheck();
+                }
+            });
+            return removeSyncCheck;
+        };
     }
     const startAnimation = () => {
         readyAnimation.cancel();

package/dist/dom-entry.d.ts

@@ -855,6 +855,20 @@ interface FrameData {
     isProcessing: boolean;
 }
 
+declare const optimizedAppearDataAttribute: "data-framer-appear-id";
+
+/**
+ * Expose only the needed part of the VisualElement interface to
+ * ensure React types don't end up in the generic DOM bundle.
+ */
+interface WithAppearProps {
+    props: {
+        [optimizedAppearDataAttribute]?: string;
+        values?: {
+            [key: string]: MotionValue<number> | MotionValue<string>;
+        };
+    };
+}
 type HandoffFunction = (storeId: string, valueName: string, frame: Batcher) => number | null;
 /**
  * The window global object acts as a bridge between our inline script
@@ -864,9 +878,9 @@ declare global {
     interface Window {
         MotionHandoffAnimation?: HandoffFunction;
         MotionHandoffIsComplete?: boolean;
-        MotionCancelOptimisedTransform?: (id?: string) => void;
-        MotionHasOptimisedTransformAnimation?: (id?: string) => boolean;
-        MotionHasOptimisedAnimation?: (id?: string) => boolean;
+        MotionHasOptimisedAnimation?: (elementId?: string, valueName?: string) => boolean;
+        MotionCancelOptimisedAnimation?: (elementId?: string, valueName?: string, frame?: Batcher, canResume?: boolean) => void;
+        MotionCheckAppearSync?: (visualElement: WithAppearProps, valueName: string, value: MotionValue) => VoidFunction | void;
     }
 }