framer-motion 5.5.2 → 5.5.3

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-28b1fded.js');
+var useMotionValue = require('./use-motion-value-3bddc610.js');
 var React = require('react');
 var styleValueTypes = require('style-value-types');
 var popmotion = require('popmotion');
@@ -633,10 +633,6 @@ var isNodeOrChild = function (parent, child) {
     }
 };
 
-function useUnmountEffect(callback) {
-    return React.useEffect(function () { return function () { return callback(); }; }, []);
-}
-
 /**
  * @param handlers -
  * @internal
@@ -688,7 +684,7 @@ function useTapGesture(_a) {
         onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
     }
     useMotionValue.usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined);
-    useUnmountEffect(removePointerEndListener);
+    useMotionValue.useUnmountEffect(removePointerEndListener);
 }
 
 var warned = new Set();
@@ -1641,7 +1637,7 @@ function usePanGesture(_a) {
         });
     }
     useMotionValue.usePointerEvent(visualElement, "pointerdown", hasPanEvents && onPointerDown);
-    useUnmountEffect(function () { return panSession.current && panSession.current.end(); });
+    useMotionValue.useUnmountEffect(function () { return panSession.current && panSession.current.end(); });
 }
 
 var drag = {
@@ -2393,21 +2389,6 @@ function createDomMotionComponent(key) {
  */
 var m = createMotionProxy(createDomMotionConfig);
 
-function useForceUpdate() {
-    var isUnmountingRef = React.useRef(false);
-    var _a = tslib.__read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
-    var forceRender = React.useCallback(function () {
-        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
-    }, [forcedRenderCount]);
-    /**
-     * Defer this to the end of the next animation frame in case there are multiple
-     * synchronous calls.
-     */
-    var deferredForceRender = React.useCallback(function () { return sync__default["default"].postRender(forceRender); }, [forceRender]);
-    return [deferredForceRender, forcedRenderCount];
-}
-
 var presenceId = 0;
 function getPresenceId() {
     var id = presenceId;
@@ -2531,7 +2512,7 @@ var AnimatePresence = function (_a) {
     var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c;
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
-    var _d = tslib.__read(useForceUpdate(), 1), forceRender = _d[0];
+    var _d = tslib.__read(useMotionValue.useForceUpdate(), 1), forceRender = _d[0];
     var forceRenderLayoutGroup = React.useContext(useMotionValue.LayoutGroupContext).forceRender;
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
@@ -2658,7 +2639,7 @@ var LayoutGroup = function (_a) {
     var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
     var layoutGroupContext = React.useContext(useMotionValue.LayoutGroupContext);
     var deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
-    var _e = tslib.__read(useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
+    var _e = tslib.__read(useMotionValue.useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
     var context = React.useRef(null);
     var upstreamId = (_b = layoutGroupContext.id) !== null && _b !== void 0 ? _b : deprecatedLayoutGroupContext;
     if (context.current === null) {
@@ -3543,7 +3524,7 @@ function startTransition(cb) {
 }
 
 function useInstantTransition() {
-    var _a = tslib.__read(useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
+    var _a = tslib.__read(useMotionValue.useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
     var startInstantLayoutTransition = useInstantLayoutTransition();
     React.useEffect(function () {
         /**

package/dist/cjs/three-entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-28b1fded.js');
+var useMotionValue = require('./use-motion-value-3bddc610.js');
 var React = require('react');
 var popmotion = require('popmotion');
 var three = require('three');
 var mergeRefs = require('react-merge-refs');
 var fiber = require('@react-three/fiber');
 var heyListen = require('hey-listen');
-var sync = require('framesync');
+require('framesync');
 require('style-value-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -336,26 +336,28 @@ function CanvasComponent(_a, forwardedRef) {
      */
     var motionContext = React.useContext(useMotionValue.MotionContext);
     var configContext = React.useContext(useMotionValue.MotionConfigContext);
+    var _b = tslib.__read(useMotionValue.useForceUpdate(), 1), forceRender = _b[0];
     var layoutCamera = React.useRef(null);
-    var _b = tslib.__read(React.useState({
+    var dimensions = React.useRef({
         size: { width: 0, height: 0 },
-    }), 2), dimensions = _b[0], setDimensions = _b[1];
-    var size = dimensions.size, dpr = dimensions.dpr;
+    });
+    var _c = dimensions.current, size = _c.size, dpr = _c.dpr;
     var containerRef = React.useRef(null);
     var handleResize = function () {
         var container = containerRef.current;
-        setDimensions({
+        dimensions.current = {
             size: {
                 width: container.offsetWidth,
                 height: container.offsetHeight,
             },
-        });
+        };
+        forceRender();
     };
     // Set canvas size on mount
     React.useLayoutEffect(handleResize, []);
     var canvasRef = React__namespace.useRef(null);
-    var _c = tslib.__read(React__namespace.useState(false), 2), block = _c[0], setBlock = _c[1];
-    var _d = tslib.__read(React__namespace.useState(false), 2), error = _d[0], setError = _d[1];
+    var _d = tslib.__read(React__namespace.useState(false), 2), block = _d[0], setBlock = _d[1];
+    var _e = tslib.__read(React__namespace.useState(false), 2), error = _e[0], setError = _e[1];
     // Suspend this component if block is a promise (2nd run)
     if (block)
         throw block;
@@ -366,7 +368,7 @@ function CanvasComponent(_a, forwardedRef) {
     if (size.width > 0 && size.height > 0) {
         fiber.render(React__namespace.createElement(ErrorBoundary, { set: setError },
             React__namespace.createElement(React__namespace.Suspense, { fallback: React__namespace.createElement(Block, { set: setBlock }) },
-                React__namespace.createElement(MotionCanvasContext.Provider, { value: { setDimensions: setDimensions, layoutCamera: layoutCamera } },
+                React__namespace.createElement(MotionCanvasContext.Provider, { value: { dimensions: dimensions, layoutCamera: layoutCamera } },
                     React__namespace.createElement(useMotionValue.MotionConfigContext.Provider, { value: configContext },
                         React__namespace.createElement(useMotionValue.MotionContext.Provider, { value: motionContext }, children))))), canvasRef.current, tslib.__assign(tslib.__assign({}, props), { dpr: dpr || props.dpr, size: size, events: events || fiber.events }));
     }
@@ -390,15 +392,18 @@ function useLayoutCamera(_a, updateCamera) {
     var _b = _a.makeDefault, makeDefault = _b === void 0 ? true : _b;
     var context = React.useContext(MotionCanvasContext);
     heyListen.invariant(Boolean(context), "No MotionCanvas detected. Replace Canvas from @react-three/fiber with MotionCanvas from framer-motion.");
-    var _c = context, setDimensions = _c.setDimensions, layoutCamera = _c.layoutCamera;
+    var _c = context, dimensions = _c.dimensions, layoutCamera = _c.layoutCamera;
     var advance = fiber.useThree(function (three) { return three.advance; });
     var set = fiber.useThree(function (three) { return three.set; });
     var camera = fiber.useThree(function (three) { return three.camera; });
     var size = fiber.useThree(function (three) { return three.size; });
     var gl = fiber.useThree(function (three) { return three.gl; });
     var parentVisualElement = useMotionValue.useVisualElementContext();
+    var measuredLayoutSize = React.useRef();
     React.useLayoutEffect(function () {
+        measuredLayoutSize.current = size;
         updateCamera(size);
+        advance(performance.now());
         var projection = parentVisualElement === null || parentVisualElement === void 0 ? void 0 : parentVisualElement.projection;
         if (!projection)
             return;
@@ -406,26 +411,27 @@ function useLayoutCamera(_a, updateCamera) {
          * When the projection of an element changes we want to update the camera
          * with the projected dimensions.
          */
-        var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) {
-            updateCamera(calcBoxSize(newProjection));
-            advance(sync.getFrameData().timestamp);
-        });
+        var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) { return updateCamera(calcBoxSize(newProjection)); });
         /**
          * When the layout of an element changes we want to update the renderer
          * output to match the layout dimensions.
          */
         var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
             var newSize = calcBoxSize(newLayout);
-            gl.setSize(newSize.width, newSize.height);
-            var dpr;
-            if (newSize.width < size.width ||
-                newSize.height < size.height) {
-                var xScale = size.width / newSize.width;
-                var yScale = size.height / newSize.height;
+            var dpr = window.devicePixelRatio;
+            var _a = dimensions.current.size, width = _a.width, height = _a.height;
+            if (newSize.width < width || newSize.height < height) {
+                var xScale = width / newSize.width;
+                var yScale = height / newSize.height;
                 var maxScale = Math.max(xScale, yScale);
                 dpr = Math.min(maxScale, 8);
             }
-            setDimensions({ size: newSize, dpr: dpr });
+            dimensions.current = {
+                size: { width: newSize.width, height: newSize.height },
+                dpr: dpr,
+            };
+            gl.setSize(newSize.width, newSize.height);
+            gl.setPixelRatio(dpr);
         });
         /**
          * When a projection animation completes we want to update the camera to
@@ -434,9 +440,13 @@ function useLayoutCamera(_a, updateCamera) {
         var removeAnimationCompleteListener = projection.addEventListener("animationComplete", function () {
             var actual = (projection.layout || {}).actual;
             if (actual) {
-                var newSize = calcBoxSize(actual);
-                updateCamera(newSize);
-                setDimensions({ size: newSize });
+                setTimeout(function () {
+                    var newSize = calcBoxSize(actual);
+                    updateCamera(newSize);
+                    dimensions.current = { size: newSize };
+                    gl.setSize(newSize.width, newSize.height);
+                    gl.setPixelRatio(window.devicePixelRatio);
+                }, 50);
             }
         });
         return function () {
@@ -444,7 +454,7 @@ function useLayoutCamera(_a, updateCamera) {
             removeLayoutMeasureListener();
             removeAnimationCompleteListener();
         };
-    }, [size]);
+    }, []);
     React.useLayoutEffect(function () {
         var cam = layoutCamera.current;
         if (makeDefault && cam) {

package/dist/cjs/{use-motion-value-28b1fded.js → use-motion-value-3bddc610.js}

@@ -3422,6 +3422,10 @@ function isDragActive() {
     return false;
 }
 
+function useUnmountEffect(callback) {
+    return React.useEffect(function () { return function () { return callback(); }; }, []);
+}
+
 var makeRenderlessComponent = function (hook) { return function (props) {
     hook(props);
     return null;
@@ -4621,6 +4625,21 @@ var visualElement = function (_a) {
 var variantProps = tslib.__spreadArray(["initial"], tslib.__read(variantPriorityOrder), false);
 var numVariantProps = variantProps.length;
 
+function useForceUpdate() {
+    var isUnmountingRef = React.useRef(false);
+    var _a = tslib.__read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
+    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+    var forceRender = React.useCallback(function () {
+        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    var deferredForceRender = React.useCallback(function () { return sync__default["default"].postRender(forceRender); }, [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
+}
+
 /**
  * Creates a `MotionValue` to track the state and velocity of a value.
  *
@@ -4707,11 +4726,13 @@ exports.transformProps = transformProps;
 exports.translateAxis = translateAxis;
 exports.useConstant = useConstant;
 exports.useDomEvent = useDomEvent;
+exports.useForceUpdate = useForceUpdate;
 exports.useIsPresent = useIsPresent;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMotionValue = useMotionValue;
 exports.usePointerEvent = usePointerEvent;
 exports.usePresence = usePresence;
+exports.useUnmountEffect = useUnmountEffect;
 exports.useVisualElementContext = useVisualElementContext;
 exports.visualElement = visualElement;
 exports.wrapHandler = wrapHandler;

package/dist/es/components/three/MotionCanvas.mjs

@@ -1,12 +1,13 @@
 import { __extends, __rest, __read, __assign } from 'tslib';
 import * as React from 'react';
-import { forwardRef, useContext, useRef, useState, useLayoutEffect } from 'react';
+import { forwardRef, useContext, useRef, useLayoutEffect } from 'react';
 import { MotionContext } from '../../context/MotionContext/index.mjs';
 import mergeRefs from 'react-merge-refs';
 import { render, events, unmountComponentAtNode } from '@react-three/fiber';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
 import { MotionCanvasContext } from './MotionCanvasContext.mjs';
+import { useForceUpdate } from '../../utils/use-force-update.mjs';
 
 /**
  * This file contains a version of R3F's Canvas component that uses our projection
@@ -49,26 +50,28 @@ function CanvasComponent(_a, forwardedRef) {
      */
     var motionContext = useContext(MotionContext);
     var configContext = useContext(MotionConfigContext);
+    var _b = __read(useForceUpdate(), 1), forceRender = _b[0];
     var layoutCamera = useRef(null);
-    var _b = __read(useState({
+    var dimensions = useRef({
         size: { width: 0, height: 0 },
-    }), 2), dimensions = _b[0], setDimensions = _b[1];
-    var size = dimensions.size, dpr = dimensions.dpr;
+    });
+    var _c = dimensions.current, size = _c.size, dpr = _c.dpr;
     var containerRef = useRef(null);
     var handleResize = function () {
         var container = containerRef.current;
-        setDimensions({
+        dimensions.current = {
             size: {
                 width: container.offsetWidth,
                 height: container.offsetHeight,
             },
-        });
+        };
+        forceRender();
     };
     // Set canvas size on mount
     useLayoutEffect(handleResize, []);
     var canvasRef = React.useRef(null);
-    var _c = __read(React.useState(false), 2), block = _c[0], setBlock = _c[1];
-    var _d = __read(React.useState(false), 2), error = _d[0], setError = _d[1];
+    var _d = __read(React.useState(false), 2), block = _d[0], setBlock = _d[1];
+    var _e = __read(React.useState(false), 2), error = _e[0], setError = _e[1];
     // Suspend this component if block is a promise (2nd run)
     if (block)
         throw block;
@@ -79,7 +82,7 @@ function CanvasComponent(_a, forwardedRef) {
     if (size.width > 0 && size.height > 0) {
         render(React.createElement(ErrorBoundary, { set: setError },
             React.createElement(React.Suspense, { fallback: React.createElement(Block, { set: setBlock }) },
-                React.createElement(MotionCanvasContext.Provider, { value: { setDimensions: setDimensions, layoutCamera: layoutCamera } },
+                React.createElement(MotionCanvasContext.Provider, { value: { dimensions: dimensions, layoutCamera: layoutCamera } },
                     React.createElement(MotionConfigContext.Provider, { value: configContext },
                         React.createElement(MotionContext.Provider, { value: motionContext }, children))))), canvasRef.current, __assign(__assign({}, props), { dpr: dpr || props.dpr, size: size, events: events$1 || events }));
     }

package/dist/es/components/three/use-layout-camera.mjs

@@ -1,10 +1,9 @@
-import { useContext, useLayoutEffect } from 'react';
+import { useContext, useRef, useLayoutEffect } from 'react';
 import { useThree } from '@react-three/fiber';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { MotionCanvasContext } from './MotionCanvasContext.mjs';
 import { invariant } from 'hey-listen';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
-import { getFrameData } from 'framesync';
 
 var calcBoxSize = function (_a) {
     var x = _a.x, y = _a.y;
@@ -17,15 +16,18 @@ function useLayoutCamera(_a, updateCamera) {
     var _b = _a.makeDefault, makeDefault = _b === void 0 ? true : _b;
     var context = useContext(MotionCanvasContext);
     invariant(Boolean(context), "No MotionCanvas detected. Replace Canvas from @react-three/fiber with MotionCanvas from framer-motion.");
-    var _c = context, setDimensions = _c.setDimensions, layoutCamera = _c.layoutCamera;
+    var _c = context, dimensions = _c.dimensions, layoutCamera = _c.layoutCamera;
     var advance = useThree(function (three) { return three.advance; });
     var set = useThree(function (three) { return three.set; });
     var camera = useThree(function (three) { return three.camera; });
     var size = useThree(function (three) { return three.size; });
     var gl = useThree(function (three) { return three.gl; });
     var parentVisualElement = useVisualElementContext();
+    var measuredLayoutSize = useRef();
     useLayoutEffect(function () {
+        measuredLayoutSize.current = size;
         updateCamera(size);
+        advance(performance.now());
         var projection = parentVisualElement === null || parentVisualElement === void 0 ? void 0 : parentVisualElement.projection;
         if (!projection)
             return;
@@ -33,26 +35,27 @@ function useLayoutCamera(_a, updateCamera) {
          * When the projection of an element changes we want to update the camera
          * with the projected dimensions.
          */
-        var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) {
-            updateCamera(calcBoxSize(newProjection));
-            advance(getFrameData().timestamp);
-        });
+        var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) { return updateCamera(calcBoxSize(newProjection)); });
         /**
          * When the layout of an element changes we want to update the renderer
          * output to match the layout dimensions.
          */
         var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
             var newSize = calcBoxSize(newLayout);
-            gl.setSize(newSize.width, newSize.height);
-            var dpr;
-            if (newSize.width < size.width ||
-                newSize.height < size.height) {
-                var xScale = size.width / newSize.width;
-                var yScale = size.height / newSize.height;
+            var dpr = window.devicePixelRatio;
+            var _a = dimensions.current.size, width = _a.width, height = _a.height;
+            if (newSize.width < width || newSize.height < height) {
+                var xScale = width / newSize.width;
+                var yScale = height / newSize.height;
                 var maxScale = Math.max(xScale, yScale);
                 dpr = Math.min(maxScale, 8);
             }
-            setDimensions({ size: newSize, dpr: dpr });
+            dimensions.current = {
+                size: { width: newSize.width, height: newSize.height },
+                dpr: dpr,
+            };
+            gl.setSize(newSize.width, newSize.height);
+            gl.setPixelRatio(dpr);
         });
         /**
          * When a projection animation completes we want to update the camera to
@@ -61,9 +64,13 @@ function useLayoutCamera(_a, updateCamera) {
         var removeAnimationCompleteListener = projection.addEventListener("animationComplete", function () {
             var actual = (projection.layout || {}).actual;
             if (actual) {
-                var newSize = calcBoxSize(actual);
-                updateCamera(newSize);
-                setDimensions({ size: newSize });
+                setTimeout(function () {
+                    var newSize = calcBoxSize(actual);
+                    updateCamera(newSize);
+                    dimensions.current = { size: newSize };
+                    gl.setSize(newSize.width, newSize.height);
+                    gl.setPixelRatio(window.devicePixelRatio);
+                }, 50);
             }
         });
         return function () {
@@ -71,7 +78,7 @@ function useLayoutCamera(_a, updateCamera) {
             removeLayoutMeasureListener();
             removeAnimationCompleteListener();
         };
-    }, [size]);
+    }, []);
     useLayoutEffect(function () {
         var cam = layoutCamera.current;
         if (makeDefault && cam) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.5.2",
+    "version": "5.5.3",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",

package/types/components/three/MotionCanvasContext.d.ts

@@ -1,5 +1,5 @@
 import { Size } from "@react-three/fiber";
-import { RefObject, Ref } from "react";
+import { MutableRefObject, RefObject, Ref } from "react";
 export declare type DimensionsState = {
     size: Size;
     dpr?: number;
@@ -8,6 +8,6 @@ export declare type SetLayoutCamera = (ref: Ref<any>) => void;
 export declare type SetDimensions = (state: DimensionsState) => void;
 export interface MotionCanvasContextProps {
     layoutCamera: RefObject<any>;
-    setDimensions: SetDimensions;
+    dimensions: MutableRefObject<DimensionsState>;
 }
 export declare const MotionCanvasContext: import("react").Context<MotionCanvasContextProps | undefined>;