framer-motion 11.11.0 → 11.11.2

package/dist/cjs/client.js

@@ -1788,6 +1788,8 @@ const isEasingArray = (ease) => {
     return Array.isArray(ease) && typeof ease[0] !== "number";
 };
 
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
 const easingLookup = {
     linear: noop,
     easeIn,
@@ -1802,7 +1804,7 @@ const easingLookup = {
     anticipate,
 };
 const easingDefinitionToFunction = (definition) => {
-    if (Array.isArray(definition)) {
+    if (isBezierDefinition(definition)) {
         // If cubic bezier definition, create bezier curve
         invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
         const [x1, y1, x2, y2] = definition;
@@ -2593,8 +2595,6 @@ const acceleratedValues = new Set([
     // "background-color"
 ]);
 
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-
 // Create a linear easing point for every 10 ms
 const resolution = 10;
 const generateLinearEasing = (easing, duration // as milliseconds
@@ -3279,7 +3279,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.11.0";
+        this.version = "11.11.2";
         /**
          * 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
@@ -5877,7 +5877,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8971,9 +8971,8 @@ const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useE
 
 const LazyContext = react.createContext({ strict: false });
 
-let scheduleHandoffComplete = false;
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a;
+    var _a, _b;
     const { visualElement: parent } = react.useContext(MotionContext);
     const lazyContext = react.useContext(LazyContext);
     const presenceContext = react.useContext(PresenceContext);
@@ -9016,11 +9015,12 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = react.useRef(Boolean(optimisedAppearId) &&
-        !window.MotionHandoffIsComplete &&
-        ((_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)));
+        !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
+        ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
+        window.MotionIsMounted = true;
         visualElement.updateFeatures();
         microtask.render(visualElement.render);
         /**
@@ -9043,18 +9043,17 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
-        wantsHandoff.current = false;
-        // This ensures all future calls to animateChanges() will run in useEffect
-        if (!scheduleHandoffComplete) {
-            scheduleHandoffComplete = true;
-            queueMicrotask(completeHandoff);
+        if (wantsHandoff.current) {
+            // This ensures all future calls to animateChanges() in this component will run in useEffect
+            queueMicrotask(() => {
+                var _a;
+                (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+            });
+            wantsHandoff.current = false;
         }
     });
     return visualElement;
 }
-function completeHandoff() {
-    window.MotionHandoffIsComplete = true;
-}
 function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
     const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;
     visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"]

package/dist/cjs/dom.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.11.0";
+        this.version = "11.11.2";
         /**
          * 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
@@ -2571,6 +2571,8 @@ const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
 const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
 const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
 
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
 const easingLookup = {
     linear: noop,
     easeIn,
@@ -2585,7 +2587,7 @@ const easingLookup = {
     anticipate,
 };
 const easingDefinitionToFunction = (definition) => {
-    if (Array.isArray(definition)) {
+    if (isBezierDefinition(definition)) {
         // If cubic bezier definition, create bezier curve
         exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
         const [x1, y1, x2, y2] = definition;
@@ -3304,8 +3306,6 @@ const acceleratedValues = new Set([
     // "background-color"
 ]);
 
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-
 // Create a linear easing point for every 10 ms
 const resolution = 10;
 const generateLinearEasing = (easing, duration // as milliseconds
@@ -4106,7 +4106,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -1858,6 +1858,8 @@ const isEasingArray = (ease) => {
     return Array.isArray(ease) && typeof ease[0] !== "number";
 };
 
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
 const easingLookup = {
     linear: noop,
     easeIn,
@@ -1872,7 +1874,7 @@ const easingLookup = {
     anticipate,
 };
 const easingDefinitionToFunction = (definition) => {
-    if (Array.isArray(definition)) {
+    if (isBezierDefinition(definition)) {
         // If cubic bezier definition, create bezier curve
         exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
         const [x1, y1, x2, y2] = definition;
@@ -2667,8 +2669,6 @@ const acceleratedValues = new Set([
     // "background-color"
 ]);
 
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-
 // Create a linear easing point for every 10 ms
 const resolution = 10;
 const generateLinearEasing = (easing, duration // as milliseconds
@@ -3362,7 +3362,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.11.0";
+        this.version = "11.11.2";
         /**
          * 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
@@ -6305,7 +6305,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10467,9 +10467,8 @@ const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useE
 
 const LazyContext = React.createContext({ strict: false });
 
-let scheduleHandoffComplete = false;
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a;
+    var _a, _b;
     const { visualElement: parent } = React.useContext(MotionContext);
     const lazyContext = React.useContext(LazyContext);
     const presenceContext = React.useContext(PresenceContext);
@@ -10512,11 +10511,12 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = React.useRef(Boolean(optimisedAppearId) &&
-        !window.MotionHandoffIsComplete &&
-        ((_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)));
+        !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
+        ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
+        window.MotionIsMounted = true;
         visualElement.updateFeatures();
         microtask.render(visualElement.render);
         /**
@@ -10539,18 +10539,17 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
-        wantsHandoff.current = false;
-        // This ensures all future calls to animateChanges() will run in useEffect
-        if (!scheduleHandoffComplete) {
-            scheduleHandoffComplete = true;
-            queueMicrotask(completeHandoff);
+        if (wantsHandoff.current) {
+            // This ensures all future calls to animateChanges() in this component will run in useEffect
+            queueMicrotask(() => {
+                var _a;
+                (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+            });
+            wantsHandoff.current = false;
         }
     });
     return visualElement;
 }
-function completeHandoff() {
-    window.MotionHandoffIsComplete = true;
-}
 function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
     const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;
     visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"]
@@ -12551,9 +12550,10 @@ const appearStoreId = (elementId, valueName) => {
 };
 
 const appearAnimationStore = new Map();
-const elementsWithAppearAnimations = new Set();
+const appearComplete = new Map();
 
 function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
+    var _a;
     const storeId = appearStoreId(elementId, valueName);
     const optimisedAnimation = appearAnimationStore.get(storeId);
     if (!optimisedAnimation) {
@@ -12572,7 +12572,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
      * older browsers.
      */
     animation.onfinish = cancelAnimation;
-    if (startTime === null || window.MotionHandoffIsComplete) {
+    if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
         /**
          * If the startTime is null, this animation is the Paint Ready detection animation
          * and we can cancel it immediately without handoff.
@@ -12615,8 +12615,7 @@ function resumeSuspendedAnimations() {
 }
 function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
     // Prevent optimised appear animations if Motion has already started animating.
-    if (window.MotionHandoffIsComplete) {
-        window.MotionHandoffAnimation = undefined;
+    if (window.MotionIsMounted) {
         return;
     }
     const id = element.dataset[optimizedAppearDataId];
@@ -12653,11 +12652,19 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
              * breakpoint.
              */
             if (!valueName) {
-                return elementsWithAppearAnimations.has(elementId);
+                return appearComplete.has(elementId);
             }
             const animationId = appearStoreId(elementId, valueName);
             return Boolean(appearAnimationStore.get(animationId));
         };
+        window.MotionHandoffMarkAsComplete = (elementId) => {
+            if (appearComplete.has(elementId)) {
+                appearComplete.set(elementId, true);
+            }
+        };
+        window.MotionHandoffIsComplete = (elementId) => {
+            return appearComplete.get(elementId) === true;
+        };
         /**
          * We only need to cancel transform animations as
          * they're the ones that will interfere with the
@@ -12736,7 +12743,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
         if (onReady)
             onReady(appearAnimation);
     };
-    elementsWithAppearAnimations.add(id);
+    appearComplete.set(id, false);
     if (readyAnimation.ready) {
         readyAnimation.ready.then(startAnimation).catch(noop);
     }

package/dist/cjs/m.js

@@ -195,9 +195,8 @@ function isRefObject(ref) {
  */
 const SwitchLayoutGroupContext = react.createContext({});
 
-let scheduleHandoffComplete = false;
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a;
+    var _a, _b;
     const { visualElement: parent } = react.useContext(MotionContext);
     const lazyContext = react.useContext(LazyContext);
     const presenceContext = react.useContext(PresenceContext);
@@ -240,11 +239,12 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = react.useRef(Boolean(optimisedAppearId) &&
-        !window.MotionHandoffIsComplete &&
-        ((_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)));
+        !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
+        ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
+        window.MotionIsMounted = true;
         visualElement.updateFeatures();
         microtask.render(visualElement.render);
         /**
@@ -267,18 +267,17 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
-        wantsHandoff.current = false;
-        // This ensures all future calls to animateChanges() will run in useEffect
-        if (!scheduleHandoffComplete) {
-            scheduleHandoffComplete = true;
-            queueMicrotask(completeHandoff);
+        if (wantsHandoff.current) {
+            // This ensures all future calls to animateChanges() in this component will run in useEffect
+            queueMicrotask(() => {
+                var _a;
+                (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+            });
+            wantsHandoff.current = false;
         }
     });
     return visualElement;
 }
-function completeHandoff() {
-    window.MotionHandoffIsComplete = true;
-}
 function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
     const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;
     visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"]

package/dist/client.d.ts

@@ -3,7 +3,7 @@ import * as React$1 from 'react';
 import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, ReactHTML, DetailedHTMLFactory, HTMLAttributes } from 'react';
 
 type EasingFunction = (v: number) => number;
-type BezierDefinition = [number, number, number, number];
+type BezierDefinition = readonly [number, number, number, number];
 type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 /**
  * The easing function to use. Set as one of:
@@ -2387,10 +2387,12 @@ type HandoffFunction = (storeId: string, valueName: string, frame: Batcher) => n
 declare global {
     interface Window {
         MotionHandoffAnimation?: HandoffFunction;
-        MotionHandoffIsComplete?: boolean;
+        MotionHandoffMarkAsComplete?: (elementId: string) => void;
+        MotionHandoffIsComplete?: (elementId: 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;
+        MotionIsMounted?: boolean;
     }
 }
 

package/dist/dom-mini.d.ts

@@ -1,5 +1,5 @@
 type EasingFunction = (v: number) => number;
-type BezierDefinition = [number, number, number, number];
+type BezierDefinition = readonly [number, number, number, number];
 type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 /**
  * The easing function to use. Set as one of:

package/dist/dom.d.ts

@@ -1,6 +1,6 @@
 type EasingFunction = (v: number) => number;
 type EasingModifier = (easing: EasingFunction) => EasingFunction;
-type BezierDefinition = [number, number, number, number];
+type BezierDefinition = readonly [number, number, number, number];
 type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 /**
  * The easing function to use. Set as one of:
@@ -915,10 +915,12 @@ type HandoffFunction = (storeId: string, valueName: string, frame: Batcher) => n
 declare global {
     interface Window {
         MotionHandoffAnimation?: HandoffFunction;
-        MotionHandoffIsComplete?: boolean;
+        MotionHandoffMarkAsComplete?: (elementId: string) => void;
+        MotionHandoffIsComplete?: (elementId: 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;
+        MotionIsMounted?: boolean;
     }
 }