framer-motion 10.16.0 → 10.16.2

package/dist/cjs/dom-entry.js

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

package/dist/cjs/{index-legacy-3cb60b07.js → index-legacy-ccd59e4d.js}

@@ -551,28 +551,39 @@ const resolveFinalValueInKeyframes = (v) => {
     return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
 };
 
-/**
- * Pipe
- * Compose other transformers to run linearily
- * pipe(min(20), max(40))
- * @param  {...functions} transformers
- * @return {function}
- */
-const combineFunctions = (a, b) => (v) => b(a(v));
-const pipe = (...transformers) => transformers.reduce(combineFunctions);
-
 const noop = (any) => any;
 
+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 arrays, one to queue jobs for the current frame
+     * 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 toRun = [];
-    let toRunNextFrame = [];
-    /**
-     *
-     */
+    let thisFrame = new Queue();
+    let nextFrame = new Queue();
     let numToRun = 0;
     /**
      * Track whether we're currently processing jobs in this step. This way
@@ -590,15 +601,12 @@ function createRenderStep(runNextFrame) {
          */
         schedule: (callback, keepAlive = false, immediate = false) => {
             const addToCurrentFrame = immediate && isProcessing;
-            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
             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;
+            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;
         },
@@ -606,9 +614,7 @@ function createRenderStep(runNextFrame) {
          * Cancel the provided callback from running on the next frame.
          */
         cancel: (callback) => {
-            const index = toRunNextFrame.indexOf(callback);
-            if (index !== -1)
-                toRunNextFrame.splice(index, 1);
+            nextFrame.remove(callback);
             toKeepAlive.delete(callback);
         },
         /**
@@ -625,14 +631,14 @@ function createRenderStep(runNextFrame) {
                 return;
             }
             isProcessing = true;
-            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-            // Clear the next frame list
-            toRunNextFrame.length = 0;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Clear the next frame queue
+            nextFrame.clear();
             // Execute this frame
-            numToRun = toRun.length;
+            numToRun = thisFrame.order.length;
             if (numToRun) {
                 for (let i = 0; i < numToRun; i++) {
-                    const callback = toRun[i];
+                    const callback = thisFrame.order[i];
                     callback(frameData);
                     if (toKeepAlive.has(callback)) {
                         step.schedule(callback);
@@ -709,6 +715,16 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
 
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
+/**
+ * Pipe
+ * Compose other transformers to run linearily
+ * pipe(min(20), max(40))
+ * @param  {...functions} transformers
+ * @return {function}
+ */
+const combineFunctions = (a, b) => (v) => b(a(v));
+const pipe = (...transformers) => transformers.reduce(combineFunctions);
+
 /**
  * Creates an object containing the latest state of every MotionValue on a VisualElement
  */
@@ -2662,7 +2678,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 = "10.16.0";
+        this.version = "10.16.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3880,7 +3896,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.16.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.0 may not work as expected.`);
+                warnOnce(nextValue.version === "10.16.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5071,7 +5087,7 @@ function updateScrollInfo(element, info, time) {
 }
 
 function calcInset(element, container) {
-    let inset = { x: 0, y: 0 };
+    const inset = { x: 0, y: 0 };
     let current = element;
     while (current && current !== container) {
         if (current instanceof HTMLElement) {
@@ -5079,16 +5095,36 @@ function calcInset(element, container) {
             inset.y += current.offsetTop;
             current = current.offsetParent;
         }
-        else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
-            const { top, left } = current.getBBox();
-            inset.x += left;
-            inset.y += top;
+        else if (current.tagName === "svg") {
             /**
-             * Assign the next parent element as the <svg /> tag.
+             * This isn't an ideal approach to measuring the offset of <svg /> tags.
+             * It would be preferable, given they behave like HTMLElements in most ways
+             * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
+             * can't use .getBBox() like most SVG elements as these provide the offset
+             * relative to the SVG itself, which for <svg /> is usually 0x0.
              */
-            while (current && current.tagName !== "svg") {
-                current = current.parentNode;
+            const svgBoundingBox = current.getBoundingClientRect();
+            current = current.parentElement;
+            const parentBoundingBox = current.getBoundingClientRect();
+            inset.x += svgBoundingBox.left - parentBoundingBox.left;
+            inset.y += svgBoundingBox.top - parentBoundingBox.top;
+        }
+        else if (current instanceof SVGGraphicsElement) {
+            const { x, y } = current.getBBox();
+            inset.x += x;
+            inset.y += y;
+            let svg = null;
+            let parent = current.parentNode;
+            while (!svg) {
+                if (parent.tagName === "svg") {
+                    svg = parent;
+                }
+                parent = current.parentNode;
             }
+            current = svg;
+        }
+        else {
+            break;
         }
     }
     return inset;
@@ -5190,6 +5226,11 @@ function resolveOffset(offset, containerLength, targetLength, targetInset) {
 }
 
 const point = { x: 0, y: 0 };
+function getTargetSize(target) {
+    return "getBBox" in target && target.tagName !== "svg"
+        ? target.getBBox()
+        : { width: target.clientWidth, height: target.clientHeight };
+}
 function resolveOffsets(container, info, options) {
     let { offset: offsetDefinition = ScrollOffset.All } = options;
     const { target = container, axis = "y" } = options;
@@ -5202,7 +5243,7 @@ function resolveOffsets(container, info, options) {
      */
     const targetSize = target === container
         ? { width: container.scrollWidth, height: container.scrollHeight }
-        : { width: target.clientWidth, height: target.clientHeight };
+        : getTargetSize(target);
     const containerSize = {
         width: container.clientWidth,
         height: container.clientHeight,

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-3cb60b07.js');
+var indexLegacy = require('./index-legacy-ccd59e4d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -74,29 +74,43 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     React.useInsertionEffect(() => {
         visualElement && visualElement.update(props, presenceContext);
     });
+    /**
+     * Cache this value as we want to know whether HandoffAppearAnimations
+     * was present on initial render - it will be deleted after this.
+     */
+    const canHandoff = React.useRef(Boolean(window.HandoffAppearAnimations));
     useIsomorphicLayoutEffect(() => {
-        visualElement && visualElement.render();
+        if (!visualElement)
+            return;
+        visualElement.render();
+        /**
+         * Ideally this function would always run in a useEffect.
+         *
+         * However, if we have optimised appear animations to handoff from,
+         * it needs to happen synchronously to ensure there's no flash of
+         * incorrect styles in the event of a hydration error.
+         *
+         * So if we detect a situtation where optimised appear animations
+         * are running, we use useLayoutEffect to trigger animations.
+         */
+        if (canHandoff.current && visualElement.animationState) {
+            visualElement.animationState.animateChanges();
+        }
     });
     React.useEffect(() => {
-        visualElement && visualElement.updateFeatures();
-    });
-    /**
-     * Ideally this function would always run in a useEffect.
-     *
-     * However, if we have optimised appear animations to handoff from,
-     * it needs to happen synchronously to ensure there's no flash of
-     * incorrect styles in the event of a hydration error.
-     *
-     * So if we detect a situtation where optimised appear animations
-     * are running, we use useLayoutEffect to trigger animations.
-     */
-    const useAnimateChangesEffect = window.HandoffAppearAnimations
-        ? useIsomorphicLayoutEffect
-        : React.useEffect;
-    useAnimateChangesEffect(() => {
-        if (visualElement && visualElement.animationState) {
+        if (!visualElement)
+            return;
+        visualElement.updateFeatures();
+        if (!canHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
+        /**
+         * Once we've handed off animations we can delete HandoffAppearAnimations
+         * so components added after the initial render can animate changes
+         * in useEffect vs useLayoutEffect.
+         */
+        window.HandoffAppearAnimations = undefined;
+        canHandoff.current = false;
     });
     return visualElement;
 }
@@ -657,24 +671,28 @@ const svgMotionConfig = {
         scrapeMotionValuesFromProps: indexLegacy.scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
         onMount: (props, instance, { renderState, latestValues }) => {
-            try {
-                renderState.dimensions =
-                    typeof instance.getBBox ===
-                        "function"
-                        ? instance.getBBox()
-                        : instance.getBoundingClientRect();
-            }
-            catch (e) {
-                // Most likely trying to measure an unrendered element under Firefox
-                renderState.dimensions = {
-                    x: 0,
-                    y: 0,
-                    width: 0,
-                    height: 0,
-                };
-            }
-            indexLegacy.buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, indexLegacy.isSVGTag(instance.tagName), props.transformTemplate);
-            indexLegacy.renderSVG(instance, renderState);
+            indexLegacy.frame.read(() => {
+                try {
+                    renderState.dimensions =
+                        typeof instance.getBBox ===
+                            "function"
+                            ? instance.getBBox()
+                            : instance.getBoundingClientRect();
+                }
+                catch (e) {
+                    // Most likely trying to measure an unrendered element under Firefox
+                    renderState.dimensions = {
+                        x: 0,
+                        y: 0,
+                        width: 0,
+                        height: 0,
+                    };
+                }
+            });
+            indexLegacy.frame.render(() => {
+                indexLegacy.buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, indexLegacy.isSVGTag(instance.tagName), props.transformTemplate);
+                indexLegacy.renderSVG(instance, renderState);
+            });
         },
     }),
 };

package/dist/es/frameloop/render-step.mjs

@@ -1,13 +1,34 @@
+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 arrays, one to queue jobs for the current frame
+     * 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 toRun = [];
-    let toRunNextFrame = [];
-    /**
-     *
-     */
+    let thisFrame = new Queue();
+    let nextFrame = new Queue();
     let numToRun = 0;
     /**
      * Track whether we're currently processing jobs in this step. This way
@@ -25,15 +46,12 @@ function createRenderStep(runNextFrame) {
          */
         schedule: (callback, keepAlive = false, immediate = false) => {
             const addToCurrentFrame = immediate && isProcessing;
-            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
             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;
+            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;
         },
@@ -41,9 +59,7 @@ function createRenderStep(runNextFrame) {
          * Cancel the provided callback from running on the next frame.
          */
         cancel: (callback) => {
-            const index = toRunNextFrame.indexOf(callback);
-            if (index !== -1)
-                toRunNextFrame.splice(index, 1);
+            nextFrame.remove(callback);
             toKeepAlive.delete(callback);
         },
         /**
@@ -60,14 +76,14 @@ function createRenderStep(runNextFrame) {
                 return;
             }
             isProcessing = true;
-            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-            // Clear the next frame list
-            toRunNextFrame.length = 0;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Clear the next frame queue
+            nextFrame.clear();
             // Execute this frame
-            numToRun = toRun.length;
+            numToRun = thisFrame.order.length;
             if (numToRun) {
                 for (let i = 0; i < numToRun; i++) {
-                    const callback = toRun[i];
+                    const callback = thisFrame.order[i];
                     callback(frameData);
                     if (toKeepAlive.has(callback)) {
                         step.schedule(callback);

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

@@ -31,29 +31,43 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useInsertionEffect(() => {
         visualElement && visualElement.update(props, presenceContext);
     });
+    /**
+     * Cache this value as we want to know whether HandoffAppearAnimations
+     * was present on initial render - it will be deleted after this.
+     */
+    const canHandoff = useRef(Boolean(window.HandoffAppearAnimations));
     useIsomorphicLayoutEffect(() => {
-        visualElement && visualElement.render();
+        if (!visualElement)
+            return;
+        visualElement.render();
+        /**
+         * Ideally this function would always run in a useEffect.
+         *
+         * However, if we have optimised appear animations to handoff from,
+         * it needs to happen synchronously to ensure there's no flash of
+         * incorrect styles in the event of a hydration error.
+         *
+         * So if we detect a situtation where optimised appear animations
+         * are running, we use useLayoutEffect to trigger animations.
+         */
+        if (canHandoff.current && visualElement.animationState) {
+            visualElement.animationState.animateChanges();
+        }
     });
     useEffect(() => {
-        visualElement && visualElement.updateFeatures();
-    });
-    /**
-     * Ideally this function would always run in a useEffect.
-     *
-     * However, if we have optimised appear animations to handoff from,
-     * it needs to happen synchronously to ensure there's no flash of
-     * incorrect styles in the event of a hydration error.
-     *
-     * So if we detect a situtation where optimised appear animations
-     * are running, we use useLayoutEffect to trigger animations.
-     */
-    const useAnimateChangesEffect = window.HandoffAppearAnimations
-        ? useIsomorphicLayoutEffect
-        : useEffect;
-    useAnimateChangesEffect(() => {
-        if (visualElement && visualElement.animationState) {
+        if (!visualElement)
+            return;
+        visualElement.updateFeatures();
+        if (!canHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
+        /**
+         * Once we've handed off animations we can delete HandoffAppearAnimations
+         * so components added after the initial render can animate changes
+         * in useEffect vs useLayoutEffect.
+         */
+        window.HandoffAppearAnimations = undefined;
+        canHandoff.current = false;
     });
     return visualElement;
 }

package/dist/es/render/dom/scroll/offsets/index.mjs

@@ -5,6 +5,11 @@ import { interpolate } from '../../../../utils/interpolate.mjs';
 import { defaultOffset } from '../../../../utils/offsets/default.mjs';
 
 const point = { x: 0, y: 0 };
+function getTargetSize(target) {
+    return "getBBox" in target && target.tagName !== "svg"
+        ? target.getBBox()
+        : { width: target.clientWidth, height: target.clientHeight };
+}
 function resolveOffsets(container, info, options) {
     let { offset: offsetDefinition = ScrollOffset.All } = options;
     const { target = container, axis = "y" } = options;
@@ -17,7 +22,7 @@ function resolveOffsets(container, info, options) {
      */
     const targetSize = target === container
         ? { width: container.scrollWidth, height: container.scrollHeight }
-        : { width: target.clientWidth, height: target.clientHeight };
+        : getTargetSize(target);
     const containerSize = {
         width: container.clientWidth,
         height: container.clientHeight,

package/dist/es/render/dom/scroll/offsets/inset.mjs

@@ -1,5 +1,5 @@
 function calcInset(element, container) {
-    let inset = { x: 0, y: 0 };
+    const inset = { x: 0, y: 0 };
     let current = element;
     while (current && current !== container) {
         if (current instanceof HTMLElement) {
@@ -7,16 +7,36 @@ function calcInset(element, container) {
             inset.y += current.offsetTop;
             current = current.offsetParent;
         }
-        else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
-            const { top, left } = current.getBBox();
-            inset.x += left;
-            inset.y += top;
+        else if (current.tagName === "svg") {
             /**
-             * Assign the next parent element as the <svg /> tag.
+             * This isn't an ideal approach to measuring the offset of <svg /> tags.
+             * It would be preferable, given they behave like HTMLElements in most ways
+             * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
+             * can't use .getBBox() like most SVG elements as these provide the offset
+             * relative to the SVG itself, which for <svg /> is usually 0x0.
              */
-            while (current && current.tagName !== "svg") {
-                current = current.parentNode;
+            const svgBoundingBox = current.getBoundingClientRect();
+            current = current.parentElement;
+            const parentBoundingBox = current.getBoundingClientRect();
+            inset.x += svgBoundingBox.left - parentBoundingBox.left;
+            inset.y += svgBoundingBox.top - parentBoundingBox.top;
+        }
+        else if (current instanceof SVGGraphicsElement) {
+            const { x, y } = current.getBBox();
+            inset.x += x;
+            inset.y += y;
+            let svg = null;
+            let parent = current.parentNode;
+            while (!svg) {
+                if (parent.tagName === "svg") {
+                    svg = parent;
+                }
+                parent = current.parentNode;
             }
+            current = svg;
+        }
+        else {
+            break;
         }
     }
     return inset;

package/dist/es/render/svg/config-motion.mjs

@@ -4,30 +4,35 @@ import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';
+import { frame } from '../../frameloop/frame.mjs';
 
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
         onMount: (props, instance, { renderState, latestValues }) => {
-            try {
-                renderState.dimensions =
-                    typeof instance.getBBox ===
-                        "function"
-                        ? instance.getBBox()
-                        : instance.getBoundingClientRect();
-            }
-            catch (e) {
-                // Most likely trying to measure an unrendered element under Firefox
-                renderState.dimensions = {
-                    x: 0,
-                    y: 0,
-                    width: 0,
-                    height: 0,
-                };
-            }
-            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
-            renderSVG(instance, renderState);
+            frame.read(() => {
+                try {
+                    renderState.dimensions =
+                        typeof instance.getBBox ===
+                            "function"
+                            ? instance.getBBox()
+                            : instance.getBoundingClientRect();
+                }
+                catch (e) {
+                    // Most likely trying to measure an unrendered element under Firefox
+                    renderState.dimensions = {
+                        x: 0,
+                        y: 0,
+                        width: 0,
+                        height: 0,
+                    };
+                }
+            });
+            frame.render(() => {
+                buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
+                renderSVG(instance, renderState);
+            });
         },
     }),
 };

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 === "10.16.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.0 may not work as expected.`);
+                warnOnce(nextValue.version === "10.16.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -28,7 +28,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 = "10.16.0";
+        this.version = "10.16.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *