framer-motion 11.0.0-alpha.1 → 11.0.0

package/dist/framer-motion.dev.js

@@ -57,6 +57,177 @@
     const optimizedAppearDataId = "framerAppearId";
     const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
+    const MotionGlobalConfig = {
+        skipAnimations: false,
+        useManualTiming: false,
+    };
+
+    class Queue {
+        constructor() {
+            this.order = [];
+            this.scheduled = new Set();
+        }
+        add(process) {
+            if (!this.scheduled.has(process)) {
+                this.scheduled.add(process);
+                this.order.push(process);
+                return true;
+            }
+        }
+        remove(process) {
+            const index = this.order.indexOf(process);
+            if (index !== -1) {
+                this.order.splice(index, 1);
+                this.scheduled.delete(process);
+            }
+        }
+        clear() {
+            this.order.length = 0;
+            this.scheduled.clear();
+        }
+    }
+    function createRenderStep(runNextFrame) {
+        /**
+         * We create and reuse two queues, one to queue jobs for the current frame
+         * and one for the next. We reuse to avoid triggering GC after x frames.
+         */
+        let thisFrame = new Queue();
+        let nextFrame = new Queue();
+        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 queue = addToCurrentFrame ? thisFrame : nextFrame;
+                if (keepAlive)
+                    toKeepAlive.add(callback);
+                if (queue.add(callback) && addToCurrentFrame && isProcessing) {
+                    // If we're adding it to the currently running queue, update its measured size
+                    numToRun = thisFrame.order.length;
+                }
+                return callback;
+            },
+            /**
+             * Cancel the provided callback from running on the next frame.
+             */
+            cancel: (callback) => {
+                nextFrame.remove(callback);
+                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;
+                [thisFrame, nextFrame] = [nextFrame, thisFrame];
+                // Clear the next frame queue
+                nextFrame.clear();
+                // Execute this frame
+                numToRun = thisFrame.order.length;
+                if (numToRun) {
+                    for (let i = 0; i < numToRun; i++) {
+                        const callback = thisFrame.order[i];
+                        if (toKeepAlive.has(callback)) {
+                            step.schedule(callback);
+                            runNextFrame();
+                        }
+                        callback(frameData);
+                    }
+                }
+                isProcessing = false;
+                if (flushNextFrame) {
+                    flushNextFrame = false;
+                    step.process(frameData);
+                }
+            },
+        };
+        return step;
+    }
+
+    const stepsOrder = [
+        "prepare",
+        "read",
+        "update",
+        "preRender",
+        "render",
+        "postRender",
+    ];
+    const maxElapsed$1 = 40;
+    function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+        let runNextFrame = false;
+        let useDefaultElapsed = true;
+        const state = {
+            delta: 0,
+            timestamp: 0,
+            isProcessing: false,
+        };
+        const steps = stepsOrder.reduce((acc, key) => {
+            acc[key] = createRenderStep(() => (runNextFrame = true));
+            return acc;
+        }, {});
+        const processStep = (stepId) => {
+            steps[stepId].process(state);
+        };
+        const processBatch = () => {
+            const timestamp = MotionGlobalConfig.useManualTiming
+                ? state.timestamp
+                : performance.now();
+            runNextFrame = false;
+            state.delta = useDefaultElapsed
+                ? 1000 / 60
+                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
+            state.timestamp = timestamp;
+            state.isProcessing = true;
+            stepsOrder.forEach(processStep);
+            state.isProcessing = false;
+            if (runNextFrame && allowKeepAlive) {
+                useDefaultElapsed = false;
+                scheduleNextBatch(processBatch);
+            }
+        };
+        const wake = () => {
+            runNextFrame = true;
+            useDefaultElapsed = true;
+            if (!state.isProcessing) {
+                scheduleNextBatch(processBatch);
+            }
+        };
+        const schedule = stepsOrder.reduce((acc, key) => {
+            const step = steps[key];
+            acc[key] = (process, keepAlive = false, immediate = false) => {
+                if (!runNextFrame)
+                    wake();
+                return step.schedule(process, keepAlive, immediate);
+            };
+            return acc;
+        }, {});
+        const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));
+        return { schedule, cancel, state, steps };
+    }
+
+    const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
+
     function useVisualElement(Component, visualState, props, createVisualElement) {
         const { visualElement: parent } = React.useContext(MotionContext);
         const lazyContext = React.useContext(LazyContext);
@@ -91,7 +262,7 @@
         useIsomorphicLayoutEffect(() => {
             if (!visualElement)
                 return;
-            visualElement.render();
+            microtask.postRender(visualElement.render);
             /**
              * Ideally this function would always run in a useEffect.
              *
@@ -1221,173 +1392,6 @@
 
     const noop = (any) => any;
 
-    const MotionGlobalConfig = {
-        skipAnimations: false,
-        useManualTiming: false,
-    };
-
-    class Queue {
-        constructor() {
-            this.order = [];
-            this.scheduled = new Set();
-        }
-        add(process) {
-            if (!this.scheduled.has(process)) {
-                this.scheduled.add(process);
-                this.order.push(process);
-                return true;
-            }
-        }
-        remove(process) {
-            const index = this.order.indexOf(process);
-            if (index !== -1) {
-                this.order.splice(index, 1);
-                this.scheduled.delete(process);
-            }
-        }
-        clear() {
-            this.order.length = 0;
-            this.scheduled.clear();
-        }
-    }
-    function createRenderStep(runNextFrame) {
-        /**
-         * We create and reuse two queues, one to queue jobs for the current frame
-         * and one for the next. We reuse to avoid triggering GC after x frames.
-         */
-        let thisFrame = new Queue();
-        let nextFrame = new Queue();
-        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 queue = addToCurrentFrame ? thisFrame : nextFrame;
-                if (keepAlive)
-                    toKeepAlive.add(callback);
-                if (queue.add(callback) && addToCurrentFrame && isProcessing) {
-                    // If we're adding it to the currently running queue, update its measured size
-                    numToRun = thisFrame.order.length;
-                }
-                return callback;
-            },
-            /**
-             * Cancel the provided callback from running on the next frame.
-             */
-            cancel: (callback) => {
-                nextFrame.remove(callback);
-                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;
-                [thisFrame, nextFrame] = [nextFrame, thisFrame];
-                // Clear the next frame queue
-                nextFrame.clear();
-                // Execute this frame
-                numToRun = thisFrame.order.length;
-                if (numToRun) {
-                    for (let i = 0; i < numToRun; i++) {
-                        const callback = thisFrame.order[i];
-                        if (toKeepAlive.has(callback)) {
-                            step.schedule(callback);
-                            runNextFrame();
-                        }
-                        callback(frameData);
-                    }
-                }
-                isProcessing = false;
-                if (flushNextFrame) {
-                    flushNextFrame = false;
-                    step.process(frameData);
-                }
-            },
-        };
-        return step;
-    }
-
-    const stepsOrder = [
-        "prepare",
-        "read",
-        "update",
-        "preRender",
-        "render",
-        "postRender",
-    ];
-    const maxElapsed$1 = 40;
-    function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-        let runNextFrame = false;
-        let useDefaultElapsed = true;
-        const state = {
-            delta: 0,
-            timestamp: 0,
-            isProcessing: false,
-        };
-        const steps = stepsOrder.reduce((acc, key) => {
-            acc[key] = createRenderStep(() => (runNextFrame = true));
-            return acc;
-        }, {});
-        const processStep = (stepId) => steps[stepId].process(state);
-        const processBatch = () => {
-            const timestamp = MotionGlobalConfig.useManualTiming
-                ? state.timestamp
-                : performance.now();
-            runNextFrame = false;
-            state.delta = useDefaultElapsed
-                ? 1000 / 60
-                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
-            state.timestamp = timestamp;
-            state.isProcessing = true;
-            stepsOrder.forEach(processStep);
-            state.isProcessing = false;
-            if (runNextFrame && allowKeepAlive) {
-                useDefaultElapsed = false;
-                scheduleNextBatch(processBatch);
-            }
-        };
-        const wake = () => {
-            runNextFrame = true;
-            useDefaultElapsed = true;
-            if (!state.isProcessing) {
-                scheduleNextBatch(processBatch);
-            }
-        };
-        const schedule = stepsOrder.reduce((acc, key) => {
-            const step = steps[key];
-            acc[key] = (process, keepAlive = false, immediate = false) => {
-                if (!runNextFrame)
-                    wake();
-                return step.schedule(process, keepAlive, immediate);
-            };
-            return acc;
-        }, {});
-        const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));
-        return { schedule, cancel, state, steps };
-    }
-
     const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
     const svgMotionConfig = {
@@ -2909,8 +2913,6 @@
         };
     }
 
-    const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
-
     let now;
     function clearTime() {
         now = undefined;
@@ -2934,7 +2936,7 @@
         },
         set: (newTime) => {
             now = newTime;
-            microtask.postRender(clearTime);
+            queueMicrotask(clearTime);
         },
     };
 
@@ -3895,7 +3897,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.0.0-alpha.1";
+            this.version = "11.0.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
@@ -6783,7 +6785,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.0.0-alpha.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.0-alpha.1 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8800,7 +8802,7 @@
             didUpdate() {
                 if (!this.updateScheduled) {
                     this.updateScheduled = true;
-                    queueMicrotask(() => this.update());
+                    microtask.read(() => this.update());
                 }
             }
             clearAllSnapshots() {
@@ -9082,9 +9084,7 @@
                  * a relativeParent. This will allow a component to perform scale correction
                  * even if no animation has started.
                  */
-                // TODO If this is unsuccessful this currently happens every frame
                 if (!this.targetDelta && !this.relativeTarget) {
-                    // TODO: This is a semi-repetition of further down this function, make DRY
                     const relativeParent = this.getClosestProjectingParent();
                     if (relativeParent &&
                         relativeParent.layout &&
@@ -10148,7 +10148,7 @@
             const { projection } = this.props.visualElement;
             if (projection) {
                 projection.root.didUpdate();
-                queueMicrotask(() => {
+                microtask.postRender(() => {
                     if (!projection.currentAnimation && projection.isLead()) {
                         this.safeToRemove();
                     }
@@ -10976,6 +10976,13 @@
                  */
                 if (isStatic)
                     return set(v);
+                /**
+                 * If the previous animation hasn't had the chance to even render a frame, render it now.
+                 */
+                const animation = activeSpringAnimation.current;
+                if (animation && animation.time === 0) {
+                    animation.sample(frameData.delta);
+                }
                 stopAnimation();
                 activeSpringAnimation.current = animateValue({
                     keyframes: [value.get(), v],
@@ -10986,16 +10993,6 @@
                     ...config,
                     onUpdate: set,
                 });
-                /**
-                 * If we're between frames, resync the animation to the frameloop.
-                 */
-                if (!frameData.isProcessing) {
-                    const delta = performance.now() - frameData.timestamp;
-                    if (delta < 30) {
-                        activeSpringAnimation.current.time =
-                            millisecondsToSeconds(delta);
-                    }
-                }
                 return value.get();
             }, stopAnimation);
         }, [JSON.stringify(config)]);
@@ -11033,6 +11030,10 @@
         const updateVelocity = () => {
             const latest = value.getVelocity();
             velocity.set(latest);
+            /**
+             * If we still have velocity, schedule an update for the next frame
+             * to keep checking until it is zero.
+             */
             if (latest)
                 frame.update(updateVelocity);
         };