framer-motion 11.0.0-alpha.1 → 11.0.0

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-4be91252.js');
+var indexLegacy = require('./index-legacy-731c5510.js');
 
 
 

package/dist/cjs/{index-legacy-4be91252.js → index-legacy-731c5510.js}

@@ -10,6 +10,175 @@ const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase
 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 };
+}
+
 function isRefObject(ref) {
     return (ref &&
         typeof ref === "object" &&
@@ -559,173 +728,6 @@ const resolveFinalValueInKeyframes = (v) => {
 
 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);
 
 /**
@@ -1764,8 +1766,6 @@ function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, b
     };
 }
 
-const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
-
 let now;
 function clearTime() {
     now = undefined;
@@ -1789,7 +1789,7 @@ const time = {
     },
     set: (newTime) => {
         now = newTime;
-        microtask.postRender(clearTime);
+        queueMicrotask(clearTime);
     },
 };
 
@@ -2750,7 +2750,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.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
@@ -3977,7 +3977,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                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)) {
@@ -5652,6 +5652,7 @@ exports.convertBoundingBoxToBox = convertBoundingBoxToBox;
 exports.convertBoxToBoundingBox = convertBoxToBoundingBox;
 exports.createBox = createBox;
 exports.createDelta = createDelta;
+exports.createRenderBatcher = createRenderBatcher;
 exports.createScopedAnimate = createScopedAnimate;
 exports.cubicBezier = cubicBezier;
 exports.delay = delay;

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-4be91252.js');
+var indexLegacy = require('./index-legacy-731c5510.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,6 +48,8 @@ const useIsomorphicLayoutEffect = indexLegacy.isBrowser ? React.useLayoutEffect
 
 const LazyContext = React.createContext({ strict: false });
 
+const { schedule: microtask, cancel: cancelMicrotask } = indexLegacy.createRenderBatcher(queueMicrotask, false);
+
 function useVisualElement(Component, visualState, props, createVisualElement) {
     const { visualElement: parent } = React.useContext(MotionContext);
     const lazyContext = React.useContext(LazyContext);
@@ -82,7 +84,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
-        visualElement.render();
+        microtask.postRender(visualElement.render);
         /**
          * Ideally this function would always run in a useEffect.
          *
@@ -3188,7 +3190,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         didUpdate() {
             if (!this.updateScheduled) {
                 this.updateScheduled = true;
-                queueMicrotask(() => this.update());
+                microtask.read(() => this.update());
             }
         }
         clearAllSnapshots() {
@@ -3470,9 +3472,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * 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 &&
@@ -4536,7 +4536,7 @@ class MeasureLayoutWithContext extends React__default["default"].Component {
         const { projection } = this.props.visualElement;
         if (projection) {
             projection.root.didUpdate();
-            queueMicrotask(() => {
+            microtask.postRender(() => {
                 if (!projection.currentAnimation && projection.isLead()) {
                     this.safeToRemove();
                 }
@@ -5365,6 +5365,13 @@ function useSpring(source, config = {}) {
              */
             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(indexLegacy.frameData.delta);
+            }
             stopAnimation();
             activeSpringAnimation.current = indexLegacy.animateValue({
                 keyframes: [value.get(), v],
@@ -5375,16 +5382,6 @@ function useSpring(source, config = {}) {
                 ...config,
                 onUpdate: set,
             });
-            /**
-             * If we're between frames, resync the animation to the frameloop.
-             */
-            if (!indexLegacy.frameData.isProcessing) {
-                const delta = performance.now() - indexLegacy.frameData.timestamp;
-                if (delta < 30) {
-                    activeSpringAnimation.current.time =
-                        indexLegacy.millisecondsToSeconds(delta);
-                }
-            }
             return value.get();
         }, stopAnimation);
     }, [JSON.stringify(config)]);
@@ -5422,6 +5419,10 @@ function useVelocity(value) {
     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)
             indexLegacy.frame.update(updateVelocity);
     };

package/dist/es/frameloop/batcher.mjs

@@ -22,7 +22,9 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         acc[key] = createRenderStep(() => (runNextFrame = true));
         return acc;
     }, {});
-    const processStep = (stepId) => steps[stepId].process(state);
+    const processStep = (stepId) => {
+        steps[stepId].process(state);
+    };
     const processBatch = () => {
         const timestamp = MotionGlobalConfig.useManualTiming
             ? state.timestamp

package/dist/es/frameloop/sync-time.mjs

@@ -1,6 +1,5 @@
 import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';
 import { frameData } from './frame.mjs';
-import { microtask } from './microtask.mjs';
 
 let now;
 function clearTime() {
@@ -25,7 +24,7 @@ const time = {
     },
     set: (newTime) => {
         now = newTime;
-        microtask.postRender(clearTime);
+        queueMicrotask(clearTime);
     },
 };
 

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -6,6 +6,7 @@ import { globalProjectionState } from '../../../projection/node/state.mjs';
 import { correctBorderRadius } from '../../../projection/styles/scale-border-radius.mjs';
 import { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';
 import { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';
+import { microtask } from '../../../frameloop/microtask.mjs';
 import { frame } from '../../../frameloop/frame.mjs';
 
 class MeasureLayoutWithContext extends React__default.Component {
@@ -80,7 +81,7 @@ class MeasureLayoutWithContext extends React__default.Component {
         const { projection } = this.props.visualElement;
         if (projection) {
             projection.root.didUpdate();
-            queueMicrotask(() => {
+            microtask.postRender(() => {
                 if (!projection.currentAnimation && projection.isLead()) {
                     this.safeToRemove();
                 }

package/dist/es/motion/utils/use-visual-element.mjs

@@ -5,6 +5,7 @@ import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs
 import { LazyContext } from '../../context/LazyContext.mjs';
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
 import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';
+import { microtask } from '../../frameloop/microtask.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement) {
     const { visualElement: parent } = useContext(MotionContext);
@@ -40,7 +41,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
-        visualElement.render();
+        microtask.postRender(visualElement.render);
         /**
          * Ideally this function would always run in a useEffect.
          *

package/dist/es/projection/node/create-projection-node.mjs

@@ -24,6 +24,7 @@ import { clamp } from '../../utils/clamp.mjs';
 import { cancelFrame, frameData, steps, frame } from '../../frameloop/frame.mjs';
 import { noop } from '../../utils/noop.mjs';
 import { time } from '../../frameloop/sync-time.mjs';
+import { microtask } from '../../frameloop/microtask.mjs';
 
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
@@ -406,7 +407,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         didUpdate() {
             if (!this.updateScheduled) {
                 this.updateScheduled = true;
-                queueMicrotask(() => this.update());
+                microtask.read(() => this.update());
             }
         }
         clearAllSnapshots() {
@@ -688,9 +689,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * 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 &&

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                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)) {

package/dist/es/value/index.mjs

@@ -34,7 +34,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.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

package/dist/es/value/use-spring.mjs

@@ -4,7 +4,6 @@ import { useMotionValue } from './use-motion-value.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 import { animateValue } from '../animation/animators/js/index.mjs';
-import { millisecondsToSeconds } from '../utils/time-conversion.mjs';
 import { frameData } from '../frameloop/frame.mjs';
 
 /**
@@ -43,6 +42,13 @@ function useSpring(source, config = {}) {
              */
             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],
@@ -53,16 +59,6 @@ function useSpring(source, config = {}) {
                 ...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)]);

package/dist/es/value/use-velocity.mjs

@@ -18,6 +18,10 @@ function useVelocity(value) {
     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);
     };