framer-motion 7.7.3 → 7.8.0

package/dist/framer-motion.dev.js

@@ -2309,176 +2309,6 @@
         current: false,
     };
 
-    /*
-      Detect and load appropriate clock setting for the execution environment
-     */
-    const defaultTimestep = (1 / 60) * 1000;
-    const getCurrentTime = typeof performance !== "undefined"
-        ? () => performance.now()
-        : () => Date.now();
-    const onNextFrame = typeof window !== "undefined"
-        ? (callback) => window.requestAnimationFrame(callback)
-        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
-
-    function createRenderStep(runNextFrame) {
-        /**
-         * We create and reuse two arrays, one to queue jobs for the current frame
-         * and one for the next. We reuse to avoid triggering GC after x frames.
-         */
-        let toRun = [];
-        let toRunNextFrame = [];
-        /**
-         *
-         */
-        let numToRun = 0;
-        /**
-         * Track whether we're currently processing jobs in this step. This way
-         * we can decide whether to schedule new jobs for this frame or next.
-         */
-        let isProcessing = false;
-        let flushNextFrame = false;
-        /**
-         * A set of processes which were marked keepAlive when scheduled.
-         */
-        const toKeepAlive = new WeakSet();
-        const step = {
-            /**
-             * Schedule a process to run on the next frame.
-             */
-            schedule: (callback, keepAlive = false, immediate = false) => {
-                const addToCurrentFrame = immediate && isProcessing;
-                const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
-                if (keepAlive)
-                    toKeepAlive.add(callback);
-                // If the buffer doesn't already contain this callback, add it
-                if (buffer.indexOf(callback) === -1) {
-                    buffer.push(callback);
-                    // If we're adding it to the currently running buffer, update its measured size
-                    if (addToCurrentFrame && isProcessing)
-                        numToRun = toRun.length;
-                }
-                return callback;
-            },
-            /**
-             * Cancel the provided callback from running on the next frame.
-             */
-            cancel: (callback) => {
-                const index = toRunNextFrame.indexOf(callback);
-                if (index !== -1)
-                    toRunNextFrame.splice(index, 1);
-                toKeepAlive.delete(callback);
-            },
-            /**
-             * Execute all schedule callbacks.
-             */
-            process: (frameData) => {
-                /**
-                 * If we're already processing we've probably been triggered by a flushSync
-                 * inside an existing process. Instead of executing, mark flushNextFrame
-                 * as true and ensure we flush the following frame at the end of this one.
-                 */
-                if (isProcessing) {
-                    flushNextFrame = true;
-                    return;
-                }
-                isProcessing = true;
-                [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-                // Clear the next frame list
-                toRunNextFrame.length = 0;
-                // Execute this frame
-                numToRun = toRun.length;
-                if (numToRun) {
-                    for (let i = 0; i < numToRun; i++) {
-                        const callback = toRun[i];
-                        callback(frameData);
-                        if (toKeepAlive.has(callback)) {
-                            step.schedule(callback);
-                            runNextFrame();
-                        }
-                    }
-                }
-                isProcessing = false;
-                if (flushNextFrame) {
-                    flushNextFrame = false;
-                    step.process(frameData);
-                }
-            },
-        };
-        return step;
-    }
-
-    const frameData = {
-        delta: 0,
-        timestamp: 0,
-    };
-
-    const maxElapsed$1 = 40;
-    let useDefaultElapsed = true;
-    let runNextFrame = false;
-    let isProcessing = false;
-    const stepsOrder = [
-        "read",
-        "update",
-        "preRender",
-        "render",
-        "postRender",
-    ];
-    const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(() => (runNextFrame = true));
-        return acc;
-    }, {});
-    const sync = stepsOrder.reduce((acc, key) => {
-        const step = steps[key];
-        acc[key] = (process, keepAlive = false, immediate = false) => {
-            if (!runNextFrame)
-                startLoop();
-            return step.schedule(process, keepAlive, immediate);
-        };
-        return acc;
-    }, {});
-    const cancelSync = stepsOrder.reduce((acc, key) => {
-        acc[key] = steps[key].cancel;
-        return acc;
-    }, {});
-    const flushSync = stepsOrder.reduce((acc, key) => {
-        acc[key] = () => steps[key].process(frameData);
-        return acc;
-    }, {});
-    const processStep = (stepId) => steps[stepId].process(frameData);
-    const processFrame = (timestamp) => {
-        runNextFrame = false;
-        frameData.delta = useDefaultElapsed
-            ? defaultTimestep
-            : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed$1), 1);
-        frameData.timestamp = timestamp;
-        isProcessing = true;
-        stepsOrder.forEach(processStep);
-        isProcessing = false;
-        if (runNextFrame) {
-            useDefaultElapsed = false;
-            onNextFrame(processFrame);
-        }
-    };
-    const startLoop = () => {
-        runNextFrame = true;
-        useDefaultElapsed = true;
-        if (!isProcessing)
-            onNextFrame(processFrame);
-    };
-
-    function delay(callback, timeout) {
-        const start = performance.now();
-        const checkElapsed = ({ timestamp }) => {
-            const elapsed = timestamp - start;
-            if (elapsed >= timeout) {
-                cancelSync.read(checkElapsed);
-                callback(elapsed - timeout);
-            }
-        };
-        sync.read(checkElapsed, true);
-        return () => cancelSync.read(checkElapsed);
-    }
-
     /*
       Value in range from progress
 
@@ -2857,6 +2687,16 @@
         return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
     }
 
+    /*
+      Convert velocity into velocity per second
+
+      @param [number]: Unit per frame
+      @param [number]: Frame duration in ms
+    */
+    function velocityPerSecond$1(velocity, frameDuration) {
+        return frameDuration ? velocity * (1000 / frameDuration) : 0;
+    }
+
     const durationKeys = ["duration", "bounce"];
     const physicsKeys = ["stiffness", "damping", "mass"];
     function isSpringType(options, keys) {
@@ -2885,6 +2725,7 @@
         }
         return springOptions;
     }
+    const velocitySampleDuration = 5;
     /**
      * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
      */
@@ -2896,11 +2737,10 @@
         const state = { done: false, value: from };
         let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
         let resolveSpring = zero;
-        let resolveVelocity = zero;
+        let initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+        const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
         function createSpring() {
-            const initialVelocity = velocity ? -(velocity / 1000) : 0.0;
             const initialDelta = to - from;
-            const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
             const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
             /**
              * If we're working within what looks like a 0-1 range, change the default restDelta
@@ -2922,29 +2762,6 @@
                                 Math.sin(angularFreq * t) +
                                 initialDelta * Math.cos(angularFreq * t)));
                 };
-                resolveVelocity = (t) => {
-                    // TODO Resolve these calculations with the above
-                    const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                    return (dampingRatio *
-                        undampedAngularFreq *
-                        envelope *
-                        ((Math.sin(angularFreq * t) *
-                            (initialVelocity +
-                                dampingRatio *
-                                    undampedAngularFreq *
-                                    initialDelta)) /
-                            angularFreq +
-                            initialDelta * Math.cos(angularFreq * t)) -
-                        envelope *
-                            (Math.cos(angularFreq * t) *
-                                (initialVelocity +
-                                    dampingRatio *
-                                        undampedAngularFreq *
-                                        initialDelta) -
-                                angularFreq *
-                                    initialDelta *
-                                    Math.sin(angularFreq * t)));
-                };
             }
             else if (dampingRatio === 1) {
                 // Critically damped spring
@@ -2978,7 +2795,21 @@
             next: (t) => {
                 const current = resolveSpring(t);
                 if (!isResolvedFromDuration) {
-                    const currentVelocity = resolveVelocity(t) * 1000;
+                    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) {
+                            const prevT = Math.max(0, t - velocitySampleDuration);
+                            currentVelocity = velocityPerSecond$1(current - resolveSpring(prevT), t - prevT);
+                        }
+                        else {
+                            currentVelocity = 0;
+                        }
+                    }
                     const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
                     const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;
                     state.done =
@@ -2991,7 +2822,7 @@
                 return state;
             },
             flipTarget: () => {
-                velocity = -velocity;
+                initialVelocity = -initialVelocity;
                 [from, to] = [to, from];
                 createSpring();
             },
@@ -3026,6 +2857,163 @@
         };
     }
 
+    /*
+      Detect and load appropriate clock setting for the execution environment
+     */
+    const defaultTimestep = (1 / 60) * 1000;
+    const getCurrentTime = typeof performance !== "undefined"
+        ? () => performance.now()
+        : () => Date.now();
+    const onNextFrame = typeof window !== "undefined"
+        ? (callback) => window.requestAnimationFrame(callback)
+        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
+
+    function createRenderStep(runNextFrame) {
+        /**
+         * We create and reuse two arrays, one to queue jobs for the current frame
+         * and one for the next. We reuse to avoid triggering GC after x frames.
+         */
+        let toRun = [];
+        let toRunNextFrame = [];
+        /**
+         *
+         */
+        let numToRun = 0;
+        /**
+         * Track whether we're currently processing jobs in this step. This way
+         * we can decide whether to schedule new jobs for this frame or next.
+         */
+        let isProcessing = false;
+        let flushNextFrame = false;
+        /**
+         * A set of processes which were marked keepAlive when scheduled.
+         */
+        const toKeepAlive = new WeakSet();
+        const step = {
+            /**
+             * Schedule a process to run on the next frame.
+             */
+            schedule: (callback, keepAlive = false, immediate = false) => {
+                const addToCurrentFrame = immediate && isProcessing;
+                const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+                if (keepAlive)
+                    toKeepAlive.add(callback);
+                // If the buffer doesn't already contain this callback, add it
+                if (buffer.indexOf(callback) === -1) {
+                    buffer.push(callback);
+                    // If we're adding it to the currently running buffer, update its measured size
+                    if (addToCurrentFrame && isProcessing)
+                        numToRun = toRun.length;
+                }
+                return callback;
+            },
+            /**
+             * Cancel the provided callback from running on the next frame.
+             */
+            cancel: (callback) => {
+                const index = toRunNextFrame.indexOf(callback);
+                if (index !== -1)
+                    toRunNextFrame.splice(index, 1);
+                toKeepAlive.delete(callback);
+            },
+            /**
+             * Execute all schedule callbacks.
+             */
+            process: (frameData) => {
+                /**
+                 * If we're already processing we've probably been triggered by a flushSync
+                 * inside an existing process. Instead of executing, mark flushNextFrame
+                 * as true and ensure we flush the following frame at the end of this one.
+                 */
+                if (isProcessing) {
+                    flushNextFrame = true;
+                    return;
+                }
+                isProcessing = true;
+                [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
+                // Clear the next frame list
+                toRunNextFrame.length = 0;
+                // Execute this frame
+                numToRun = toRun.length;
+                if (numToRun) {
+                    for (let i = 0; i < numToRun; i++) {
+                        const callback = toRun[i];
+                        callback(frameData);
+                        if (toKeepAlive.has(callback)) {
+                            step.schedule(callback);
+                            runNextFrame();
+                        }
+                    }
+                }
+                isProcessing = false;
+                if (flushNextFrame) {
+                    flushNextFrame = false;
+                    step.process(frameData);
+                }
+            },
+        };
+        return step;
+    }
+
+    const frameData = {
+        delta: 0,
+        timestamp: 0,
+    };
+
+    const maxElapsed$1 = 40;
+    let useDefaultElapsed = true;
+    let runNextFrame = false;
+    let isProcessing = false;
+    const stepsOrder = [
+        "read",
+        "update",
+        "preRender",
+        "render",
+        "postRender",
+    ];
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(() => (runNextFrame = true));
+        return acc;
+    }, {});
+    const sync = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                startLoop();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancelSync = stepsOrder.reduce((acc, key) => {
+        acc[key] = steps[key].cancel;
+        return acc;
+    }, {});
+    const flushSync = stepsOrder.reduce((acc, key) => {
+        acc[key] = () => steps[key].process(frameData);
+        return acc;
+    }, {});
+    const processStep = (stepId) => steps[stepId].process(frameData);
+    const processFrame = (timestamp) => {
+        runNextFrame = false;
+        frameData.delta = useDefaultElapsed
+            ? defaultTimestep
+            : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed$1), 1);
+        frameData.timestamp = timestamp;
+        isProcessing = true;
+        stepsOrder.forEach(processStep);
+        isProcessing = false;
+        if (runNextFrame) {
+            useDefaultElapsed = false;
+            onNextFrame(processFrame);
+        }
+    };
+    const startLoop = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!isProcessing)
+            onNextFrame(processFrame);
+    };
+
     const types = { decay, keyframes, spring };
     function loopElapsed(elapsed, duration, delay = 0) {
         return elapsed - duration - delay;
@@ -3094,7 +3082,7 @@
                     latest = interpolateFromNumber(latest);
                 isComplete = isForwardPlayback ? state.done : elapsed <= 0;
             }
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
+            onUpdate && onUpdate(latest);
             if (isComplete) {
                 if (repeatCount === 0) {
                     computedDuration =
@@ -3109,29 +3097,19 @@
             }
         }
         function play() {
-            onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+            onPlay && onPlay();
             driverControls = driver(update);
             driverControls.start();
         }
         autoplay && play();
         return {
             stop: () => {
-                onStop === null || onStop === void 0 ? void 0 : onStop();
+                onStop && onStop();
                 driverControls.stop();
             },
         };
     }
 
-    /*
-      Convert velocity into velocity per second
-
-      @param [number]: Unit per frame
-      @param [number]: Frame duration in ms
-    */
-    function velocityPerSecond$1(velocity, frameDuration) {
-        return frameDuration ? velocity * (1000 / frameDuration) : 0;
-    }
-
     function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
         let currentAnimation;
         function isOutOfBounds(v) {
@@ -3212,6 +3190,22 @@
         };
     }
 
+    /**
+     * Timeout defined in ms
+     */
+    function delay(callback, timeout) {
+        const start = performance.now();
+        const checkElapsed = ({ timestamp }) => {
+            const elapsed = timestamp - start;
+            if (elapsed >= timeout) {
+                cancelSync.read(checkElapsed);
+                callback(elapsed - timeout);
+            }
+        };
+        sync.read(checkElapsed, true);
+        return () => cancelSync.read(checkElapsed);
+    }
+
     /**
      * Decide whether a transition is defined on a given Transition.
      * This filters out orchestration options and returns true
@@ -3298,6 +3292,9 @@
      */
     function getAnimation(key, value, target, transition, onComplete) {
         const valueTransition = getValueTransition(transition, key) || {};
+        const { elapsed = 0 } = transition;
+        valueTransition.elapsed =
+            elapsed - secondsToMilliseconds(transition.delay || 0);
         let origin = valueTransition.from !== undefined ? valueTransition.from : value.get();
         const isTargetAnimatable = isAnimatable(key, target);
         if (origin === "none" && isTargetAnimatable && typeof target === "string") {
@@ -3325,20 +3322,23 @@
                 onComplete,
                 onUpdate: (v) => value.set(v),
             };
-            return valueTransition.type === "inertia" ||
+            const animation = valueTransition.type === "inertia" ||
                 valueTransition.type === "decay"
                 ? inertia({ ...options, ...valueTransition })
                 : animate$1({
                     ...getPopmotionAnimationOptions(valueTransition, options, key),
                     onUpdate: (v) => {
                         options.onUpdate(v);
-                        valueTransition.onUpdate && valueTransition.onUpdate(v);
+                        valueTransition.onUpdate &&
+                            valueTransition.onUpdate(v);
                     },
                     onComplete: () => {
                         options.onComplete();
-                        valueTransition.onComplete && valueTransition.onComplete();
+                        valueTransition.onComplete &&
+                            valueTransition.onComplete();
                     },
                 });
+            return () => animation.stop();
         }
         function set() {
             const finalTarget = resolveFinalValueInKeyframes(target);
@@ -3346,13 +3346,16 @@
             onComplete();
             valueTransition.onUpdate && valueTransition.onUpdate(finalTarget);
             valueTransition.onComplete && valueTransition.onComplete();
-            return { stop: () => { } };
+            return () => { };
         }
-        return !isOriginAnimatable ||
+        const useInstantAnimation = !isOriginAnimatable ||
             !isTargetAnimatable ||
-            valueTransition.type === false
-            ? set
-            : start;
+            valueTransition.type === false;
+        return useInstantAnimation
+            ? valueTransition.elapsed
+                ? () => delay(set, -valueTransition.elapsed)
+                : set()
+            : start();
     }
     function isZero(value) {
         return (value === 0 ||
@@ -3377,21 +3380,7 @@
             transition = { type: false };
         }
         return value.start((onComplete) => {
-            let controls;
-            const animation = getAnimation(key, value, target, transition, onComplete);
-            const delayBy = getDelayFromTransition(transition, key);
-            const start = () => (controls = animation());
-            let cancelDelay;
-            if (delayBy) {
-                cancelDelay = delay(start, secondsToMilliseconds(delayBy));
-            }
-            else {
-                start();
-            }
-            return () => {
-                cancelDelay && cancelDelay();
-                controls && controls.stop();
-            };
+            return getAnimation(key, value, target, { ...transition, delay: getDelayFromTransition(transition, key) }, onComplete);
         });
     }
 
@@ -3484,7 +3473,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 = "7.7.3";
+            this.version = "7.8.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3927,6 +3916,40 @@
         return Boolean(isMotionValue(value) && value.add);
     }
 
+    const appearStoreId = (id, value) => `${id}: ${value}`;
+
+    function handoffOptimizedAppearAnimation(id, name) {
+        const { MotionAppearAnimations } = window;
+        const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
+        const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
+        if (animation) {
+            /**
+             * We allow the animation to persist until the next frame:
+             *   1. So it continues to play until Framer Motion is ready to render
+             *      (avoiding a potential flash of the element's original state)
+             *   2. As all independent transforms share a single transform animation, stopping
+             *      it synchronously would prevent subsequent transforms from handing off.
+             */
+            sync.render(() => {
+                /**
+                 * Animation.cancel() throws so it needs to be wrapped in a try/catch
+                 */
+                try {
+                    animation.cancel();
+                    MotionAppearAnimations.delete(animationId);
+                }
+                catch (e) { }
+            });
+            return animation.currentTime || 0;
+        }
+        else {
+            return 0;
+        }
+    }
+
+    const optimizedAppearDataId = "framerAppearId";
+    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
     function animateVisualElement(visualElement, definition, options = {}) {
         visualElement.notify("AnimationStart", definition);
         let animation;
@@ -4004,7 +4027,7 @@
                     shouldBlockAnimation(animationTypeState, key))) {
                 continue;
             }
-            let valueTransition = { delay, ...transition };
+            let valueTransition = { delay, elapsed: 0, ...transition };
             /**
              * Make animation instant if this is a transform prop and we should reduce motion.
              */
@@ -4015,6 +4038,16 @@
                     delay: 0,
                 };
             }
+            /**
+             * If this is the first time a value is being animated, check
+             * to see if we're handling off from an existing animation.
+             */
+            if (!value.hasAnimated) {
+                const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
+                if (appearId) {
+                    valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key);
+                }
+            }
             let animation = startAnimation(key, value, valueTarget, valueTransition);
             if (isWillChangeMotionValue(willChange)) {
                 willChange.add(key);
@@ -5766,7 +5799,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.7.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.3 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.8.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10194,6 +10227,46 @@
         return reset;
     }
 
+    const featureTests = {
+        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+    };
+    const results = {};
+    const supports = {};
+    /**
+     * Generate features tests that cache their results.
+     */
+    for (const key in featureTests) {
+        supports[key] = () => {
+            if (results[key] === undefined)
+                results[key] = featureTests[key]();
+            return results[key];
+        };
+    }
+
+    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
+    function animateStyle(element, valueName, keyframes, { delay, duration, ease }) {
+        if (!supports.waapi())
+            return undefined;
+        const animation = element.animate({ [valueName]: keyframes }, {
+            delay,
+            duration,
+            easing: Array.isArray(ease) ? cubicBezierAsString(ease) : ease,
+            fill: "both",
+        });
+        return animation;
+    }
+
+    function startOptimizedAppearAnimation(element, name, keyframes, options) {
+        window.MotionAppearAnimations || (window.MotionAppearAnimations = new Map());
+        const id = element.dataset[optimizedAppearDataId];
+        const animation = animateStyle(element, name, keyframes, options);
+        if (id && animation) {
+            window.MotionAppearAnimations.set(appearStoreId(id, name), animation);
+        }
+        return animation;
+    }
+
     const createObject = () => ({});
     class StateVisualElement extends VisualElement {
         build() { }
@@ -10343,8 +10416,11 @@
     exports.mix = mix$1;
     exports.motion = motion;
     exports.motionValue = motionValue;
+    exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
     exports.pipe = pipe;
     exports.resolveMotionValue = resolveMotionValue;
+    exports.spring = spring;
+    exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
     exports.transform = transform;
     exports.unwrapMotionComponent = unwrapMotionComponent;
     exports.useAnimation = useAnimation;