framer-motion 11.3.21 → 11.3.23-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.21";
+        this.version = "11.3.23-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
@@ -1984,19 +1984,17 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
         next: (t) => {
             const current = resolveSpring(t);
             if (!isResolvedFromDuration) {
-                let currentVelocity = initialVelocity;
-                if (t !== 0) {
-                    /**
-                     * We only need to calculate velocity for under-damped springs
-                     * as over- and critically-damped springs can't overshoot, so
-                     * checking only for displacement is enough.
-                     */
-                    if (dampingRatio < 1) {
-                        currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
-                    }
-                    else {
-                        currentVelocity = 0;
-                    }
+                let currentVelocity = 0.0;
+                /**
+                 * We only need to calculate velocity for under-damped springs
+                 * as over- and critically-damped springs can't overshoot, so
+                 * checking only for displacement is enough.
+                 */
+                if (dampingRatio < 1) {
+                    currentVelocity =
+                        t === 0
+                            ? secondsToMilliseconds(initialVelocity)
+                            : calcGeneratorVelocity(resolveSpring, t, current);
                 }
                 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
                 const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
@@ -2887,7 +2885,7 @@ class MainThreadAnimation extends BaseAnimation {
         }
         if (this.isStopped)
             return;
-        const { driver = frameloopDriver, onPlay } = this.options;
+        const { driver = frameloopDriver, onPlay, startTime } = this.options;
         if (!this.driver) {
             this.driver = driver((timestamp) => this.tick(timestamp));
         }
@@ -2897,7 +2895,7 @@ class MainThreadAnimation extends BaseAnimation {
             this.startTime = now - this.holdTime;
         }
         else if (!this.startTime || this.state === "finished") {
-            this.startTime = now;
+            this.startTime = startTime || now;
         }
         if (this.state === "finished") {
             this.updateFinishedPromise();
@@ -3608,13 +3606,16 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
          * to see if we're handling off from an existing animation.
          */
         let isHandoff = false;
-        if (window.HandoffAppearAnimations) {
+        if (window.MotionHandoffAnimation) {
             const appearId = getOptimisedAppearId(visualElement);
             if (appearId) {
-                const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);
-                if (elapsed !== null) {
-                    valueTransition.elapsed = elapsed;
+                const handoffInfo = window.MotionHandoffAnimation(appearId, key, frame);
+                if (handoffInfo !== null) {
                     isHandoff = true;
+                    const { elapsed, startTime } = handoffInfo;
+                    valueTransition.elapsed = elapsed;
+                    if (startTime)
+                        valueTransition.startTime = startTime;
                 }
             }
         }
@@ -3754,7 +3755,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.21", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.21 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.23-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.23-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -223,6 +223,7 @@ const SwitchLayoutGroupContext = React.createContext({});
 
 let scheduleHandoffComplete = false;
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
+    var _a;
     const { visualElement: parent } = React.useContext(MotionContext);
     const lazyContext = React.useContext(LazyContext);
     const presenceContext = React.useContext(PresenceContext);
@@ -263,8 +264,10 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      * Cache this value as we want to know whether HandoffAppearAnimations
      * was present on initial render - it will be deleted after this.
      */
-    const wantsHandoff = React.useRef(Boolean(props[optimizedAppearDataAttribute] &&
-        !window.HandoffComplete));
+    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)));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
@@ -290,19 +293,17 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
-        if (wantsHandoff.current) {
-            wantsHandoff.current = false;
-            // This ensures all future calls to animateChanges() will run in useEffect
-            if (!scheduleHandoffComplete) {
-                scheduleHandoffComplete = true;
-                queueMicrotask(completeHandoff);
-            }
+        wantsHandoff.current = false;
+        // This ensures all future calls to animateChanges() will run in useEffect
+        if (!scheduleHandoffComplete) {
+            scheduleHandoffComplete = true;
+            queueMicrotask(completeHandoff);
         }
     });
     return visualElement;
 }
 function completeHandoff() {
-    window.HandoffComplete = true;
+    window.MotionHandoffIsComplete = true;
 }
 function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
     const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;
@@ -3243,19 +3244,17 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
         next: (t) => {
             const current = resolveSpring(t);
             if (!isResolvedFromDuration) {
-                let currentVelocity = initialVelocity;
-                if (t !== 0) {
-                    /**
-                     * We only need to calculate velocity for under-damped springs
-                     * as over- and critically-damped springs can't overshoot, so
-                     * checking only for displacement is enough.
-                     */
-                    if (dampingRatio < 1) {
-                        currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
-                    }
-                    else {
-                        currentVelocity = 0;
-                    }
+                let currentVelocity = 0.0;
+                /**
+                 * We only need to calculate velocity for under-damped springs
+                 * as over- and critically-damped springs can't overshoot, so
+                 * checking only for displacement is enough.
+                 */
+                if (dampingRatio < 1) {
+                    currentVelocity =
+                        t === 0
+                            ? secondsToMilliseconds(initialVelocity)
+                            : calcGeneratorVelocity(resolveSpring, t, current);
                 }
                 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
                 const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
@@ -4136,7 +4135,7 @@ class MainThreadAnimation extends BaseAnimation {
         }
         if (this.isStopped)
             return;
-        const { driver = frameloopDriver, onPlay } = this.options;
+        const { driver = frameloopDriver, onPlay, startTime } = this.options;
         if (!this.driver) {
             this.driver = driver((timestamp) => this.tick(timestamp));
         }
@@ -4146,7 +4145,7 @@ class MainThreadAnimation extends BaseAnimation {
             this.startTime = now - this.holdTime;
         }
         else if (!this.startTime || this.state === "finished") {
-            this.startTime = now;
+            this.startTime = startTime || now;
         }
         if (this.state === "finished") {
             this.updateFinishedPromise();
@@ -4824,7 +4823,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.21";
+        this.version = "11.3.23-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
@@ -5238,13 +5237,16 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
          * to see if we're handling off from an existing animation.
          */
         let isHandoff = false;
-        if (window.HandoffAppearAnimations) {
+        if (window.MotionHandoffAnimation) {
             const appearId = getOptimisedAppearId(visualElement);
             if (appearId) {
-                const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);
-                if (elapsed !== null) {
-                    valueTransition.elapsed = elapsed;
+                const handoffInfo = window.MotionHandoffAnimation(appearId, key, frame);
+                if (handoffInfo !== null) {
                     isHandoff = true;
+                    const { elapsed, startTime } = handoffInfo;
+                    valueTransition.elapsed = elapsed;
+                    if (startTime)
+                        valueTransition.startTime = startTime;
                 }
             }
         }
@@ -7286,7 +7288,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.21", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.21 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.23-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.23-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8928,7 +8930,7 @@ function resetDistortingTransform(key, visualElement, values, sharedAnimationVal
         }
     }
 }
-function isOptimisedAppearTree(projectionNode) {
+function isOptimisedTransformAnimationInTree(projectionNode) {
     projectionNode.hasCheckedOptimisedAppear = true;
     if (projectionNode.root === projectionNode)
         return false;
@@ -8936,12 +8938,12 @@ function isOptimisedAppearTree(projectionNode) {
     if (!visualElement) {
         return false;
     }
-    else if (getOptimisedAppearId(visualElement)) {
+    else if (window.MotionHasOptimisedTransformAnimation(getOptimisedAppearId(visualElement))) {
         return true;
     }
     else if (projectionNode.parent &&
         !projectionNode.parent.hasCheckedOptimisedAppear) {
-        return isOptimisedAppearTree(projectionNode.parent);
+        return isOptimisedTransformAnimationInTree(projectionNode.parent);
     }
     else {
         return false;
@@ -9268,9 +9270,9 @@ 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.HandoffCancelAllAnimations &&
-                isOptimisedAppearTree(this)) {
-                window.HandoffCancelAllAnimations();
+            if (window.MotionHandoffCancelAll &&
+                isOptimisedTransformAnimationInTree(this)) {
+                window.MotionHandoffCancelAll();
             }
             !this.root.isUpdating && this.root.startUpdate();
             if (this.isLayoutDirty)
@@ -12154,16 +12156,10 @@ function useResetProjection() {
 const appearStoreId = (id, value) => `${id}: ${value}`;
 
 const appearAnimationStore = new Map();
+const elementsWithAppearAnimations = new Set();
 
 let handoffFrameTime;
-function handoffOptimizedAppearAnimation(elementId, valueName, 
-/**
- * Legacy arguments. This function is inlined as part of SSG so it can be there's
- * a version mismatch between the main included Motion and the inlined script.
- *
- * Remove in early 2024.
- */
-_value, frame) {
+function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
     const optimisedValueName = transformProps.has(valueName)
         ? "transform"
         : valueName;
@@ -12173,48 +12169,26 @@ _value, frame) {
         return null;
     }
     const { animation, startTime } = optimisedAnimation;
-    const cancelAnimation = () => {
+    if (startTime === null || window.MotionHandoffIsComplete) {
+        /**
+         * If the startTime is null, this animation is the Paint Ready detection animation
+         * and we can cancel it immediately without handoff.
+         *
+         * 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);
-        if (frame) {
-            /**
-             * If we've been provided the frameloop as an argument, use it to defer
-             * cancellation until keyframes of the subsequent animation have been resolved.
-             * This "papers over" a gap where the JS animations haven't rendered with
-             * the latest time after a potential heavy blocking workload.
-             * Otherwise cancel immediately.
-             *
-             * This is an optional dependency to deal with the fact that this inline
-             * script and the library can be version sharded, and there have been
-             * times when this isn't provided as an argument.
-             */
-            frame.render(() => frame.render(() => {
-                try {
-                    animation.cancel();
-                }
-                catch (error) { }
-            }));
-        }
-        else {
+        frame.render(() => frame.render(() => {
             try {
                 animation.cancel();
             }
             catch (error) { }
-        }
-    };
-    /**
-     * If the startTime is null, this animation is the Paint Ready detection animation
-     * and we can cancel it immediately without handoff.
-     *
-     * Or if we've already handed off the animation then we're now interrupting it.
-     * In which case we need to cancel it.
-     */
-    if (startTime === null || window.HandoffComplete) {
-        cancelAnimation();
+        }));
         return null;
     }
     else {
         /**
-         * Otherwise we're handing off this animation to the main thread.
+         * Otherwise we're starting a main thread animation.
          *
          * Record the time of the first handoff. We call performance.now() once
          * here and once in startOptimisedAnimation to ensure we're getting
@@ -12229,7 +12203,10 @@ _value, frame) {
          * an updated value for several frames, even as the animation plays smoothly via
          * the GPU.
          */
-        return handoffFrameTime - startTime || 0;
+        return {
+            elapsed: handoffFrameTime - startTime || 0,
+            startTime: handoffFrameTime || 0,
+        };
     }
 }
 
@@ -12248,14 +12225,14 @@ let startFrameTime;
 let readyAnimation;
 function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
     // Prevent optimised appear animations if Motion has already started animating.
-    if (window.HandoffComplete) {
-        window.HandoffAppearAnimations = undefined;
+    if (window.MotionHandoffIsComplete) {
+        window.MotionHandoffAnimation = undefined;
         return;
     }
     const id = element.dataset[optimizedAppearDataId];
     if (!id)
         return;
-    window.HandoffAppearAnimations = handoffOptimizedAppearAnimation;
+    window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
     const storeId = appearStoreId(id, name);
     if (!readyAnimation) {
         readyAnimation = animateStyle(element, name, [keyframes[0], keyframes[0]], 
@@ -12268,15 +12245,37 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
             animation: readyAnimation,
             startTime: null,
         });
-        if (!window.HandoffCancelAllAnimations) {
-            window.HandoffCancelAllAnimations = () => {
-                appearAnimationStore.forEach(({ animation }) => {
+        /**
+         * If there's no readyAnimation then there's been no instantiation
+         * of handoff animations.
+         */
+        window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
+        /**
+         * We only need to cancel transform animations as
+         * they're the ones that will interfere with the
+         * layout animation measurements.
+         */
+        window.MotionHandoffCancelAll = () => {
+            appearAnimationStore.forEach(({ animation }, animationId) => {
+                if (animationId.endsWith("transform")) {
                     animation.cancel();
-                });
-                appearAnimationStore.clear();
-                window.HandoffCancelAllAnimations = undefined;
-            };
-        }
+                    appearAnimationStore.delete(animationId);
+                }
+            });
+            window.MotionHandoffCancelAll = 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.MotionHasOptimisedTransformAnimation = (elementId) => Boolean(elementId &&
+            appearAnimationStore.has(appearStoreId(elementId, "transform")));
     }
     const startAnimation = () => {
         readyAnimation.cancel();
@@ -12297,6 +12296,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
         if (onReady)
             onReady(appearAnimation);
     };
+    elementsWithAppearAnimations.add(id);
     if (readyAnimation.ready) {
         readyAnimation.ready.then(startAnimation).catch(noop);
     }

package/dist/dom-entry.d.ts

@@ -852,16 +852,21 @@ interface FrameData {
     isProcessing: boolean;
 }
 
-type HandoffFunction = (storeId: string, valueName: string, value?: MotionValue, frame?: Batcher) => null | number;
+type HandoffFunction = (storeId: string, valueName: string, frame: Batcher) => null | {
+    elapsed: number;
+    startTime: number;
+};
 /**
  * The window global object acts as a bridge between our inline script
  * triggering the optimized appear animations, and Framer Motion.
  */
 declare global {
     interface Window {
-        HandoffAppearAnimations?: HandoffFunction;
-        HandoffComplete?: boolean;
-        HandoffCancelAllAnimations?: VoidFunction;
+        MotionHandoffAnimation?: HandoffFunction;
+        MotionHandoffIsComplete?: boolean;
+        MotionHandoffCancelAll?: VoidFunction;
+        MotionHasOptimisedAnimation?: (id?: string) => boolean;
+        MotionHasOptimisedTransformAnimation?: (id?: string) => boolean;
     }
 }