framer-motion 5.5.1 → 5.5.2

package/dist/cjs/three-entry.js

@@ -337,13 +337,18 @@ function CanvasComponent(_a, forwardedRef) {
     var motionContext = React.useContext(useMotionValue.MotionContext);
     var configContext = React.useContext(useMotionValue.MotionConfigContext);
     var layoutCamera = React.useRef(null);
-    var _b = tslib.__read(React.useState({ width: 0, height: 0 }), 2), size = _b[0], setSize = _b[1];
+    var _b = tslib.__read(React.useState({
+        size: { width: 0, height: 0 },
+    }), 2), dimensions = _b[0], setDimensions = _b[1];
+    var size = dimensions.size, dpr = dimensions.dpr;
     var containerRef = React.useRef(null);
     var handleResize = function () {
         var container = containerRef.current;
-        setSize({
-            width: container.offsetWidth,
-            height: container.offsetHeight,
+        setDimensions({
+            size: {
+                width: container.offsetWidth,
+                height: container.offsetHeight,
+            },
         });
     };
     // Set canvas size on mount
@@ -361,9 +366,9 @@ 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: { setSize: setSize, layoutCamera: layoutCamera } },
+                React__namespace.createElement(MotionCanvasContext.Provider, { value: { setDimensions: setDimensions, 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), { size: size, events: events || fiber.events }));
+                        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 }));
     }
     useMotionValue.useIsomorphicLayoutEffect(function () {
         var container = canvasRef.current;
@@ -385,8 +390,7 @@ 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, setSize = _c.setSize, layoutCamera = _c.layoutCamera;
-    var latestLayout = React.useRef(null);
+    var _c = context, setDimensions = _c.setDimensions, 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; });
@@ -403,17 +407,6 @@ function useLayoutCamera(_a, updateCamera) {
          * with the projected dimensions.
          */
         var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) {
-            // TODO: Removed to prevent iOS from crashing.
-            // Perhaps a better apporach is to set with setSize
-            // and then set to window native on animationComplete.
-            // if (latestLayout.current) {
-            //     const { x, y } = latestLayout.current
-            //     const xRatio = calcLength(newProjection.x) / calcLength(x)
-            //     const yRatio = calcLength(newProjection.y) / calcLength(y)
-            //     gl.setPixelRatio(
-            //         Math.max(xRatio, yRatio) * window.devicePixelRatio
-            //     )
-            // }
             updateCamera(calcBoxSize(newProjection));
             advance(sync.getFrameData().timestamp);
         });
@@ -422,10 +415,17 @@ function useLayoutCamera(_a, updateCamera) {
          * output to match the layout dimensions.
          */
         var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
-            latestLayout.current = newLayout;
             var newSize = calcBoxSize(newLayout);
             gl.setSize(newSize.width, newSize.height);
-            setSize(newSize);
+            var dpr;
+            if (newSize.width < size.width ||
+                newSize.height < size.height) {
+                var xScale = size.width / newSize.width;
+                var yScale = size.height / newSize.height;
+                var maxScale = Math.max(xScale, yScale);
+                dpr = Math.min(maxScale, 8);
+            }
+            setDimensions({ size: newSize, dpr: dpr });
         });
         /**
          * When a projection animation completes we want to update the camera to
@@ -433,14 +433,18 @@ function useLayoutCamera(_a, updateCamera) {
          */
         var removeAnimationCompleteListener = projection.addEventListener("animationComplete", function () {
             var actual = (projection.layout || {}).actual;
-            actual && updateCamera(calcBoxSize(actual));
+            if (actual) {
+                var newSize = calcBoxSize(actual);
+                updateCamera(newSize);
+                setDimensions({ size: newSize });
+            }
         });
         return function () {
             removeProjectionUpdateListener();
             removeLayoutMeasureListener();
             removeAnimationCompleteListener();
         };
-    }, []);
+    }, [size]);
     React.useLayoutEffect(function () {
         var cam = layoutCamera.current;
         if (makeDefault && cam) {

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

@@ -50,13 +50,18 @@ function CanvasComponent(_a, forwardedRef) {
     var motionContext = useContext(MotionContext);
     var configContext = useContext(MotionConfigContext);
     var layoutCamera = useRef(null);
-    var _b = __read(useState({ width: 0, height: 0 }), 2), size = _b[0], setSize = _b[1];
+    var _b = __read(useState({
+        size: { width: 0, height: 0 },
+    }), 2), dimensions = _b[0], setDimensions = _b[1];
+    var size = dimensions.size, dpr = dimensions.dpr;
     var containerRef = useRef(null);
     var handleResize = function () {
         var container = containerRef.current;
-        setSize({
-            width: container.offsetWidth,
-            height: container.offsetHeight,
+        setDimensions({
+            size: {
+                width: container.offsetWidth,
+                height: container.offsetHeight,
+            },
         });
     };
     // Set canvas size on mount
@@ -74,9 +79,9 @@ 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: { setSize: setSize, layoutCamera: layoutCamera } },
+                React.createElement(MotionCanvasContext.Provider, { value: { setDimensions: setDimensions, layoutCamera: layoutCamera } },
                     React.createElement(MotionConfigContext.Provider, { value: configContext },
-                        React.createElement(MotionContext.Provider, { value: motionContext }, children))))), canvasRef.current, __assign(__assign({}, props), { size: size, events: events$1 || events }));
+                        React.createElement(MotionContext.Provider, { value: motionContext }, children))))), canvasRef.current, __assign(__assign({}, props), { dpr: dpr || props.dpr, size: size, events: events$1 || events }));
     }
     useIsomorphicLayoutEffect(function () {
         var container = canvasRef.current;

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

@@ -1,4 +1,4 @@
-import { useContext, useRef, useLayoutEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import { useThree } from '@react-three/fiber';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { MotionCanvasContext } from './MotionCanvasContext.mjs';
@@ -17,8 +17,7 @@ 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, setSize = _c.setSize, layoutCamera = _c.layoutCamera;
-    var latestLayout = useRef(null);
+    var _c = context, setDimensions = _c.setDimensions, 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; });
@@ -35,17 +34,6 @@ function useLayoutCamera(_a, updateCamera) {
          * with the projected dimensions.
          */
         var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) {
-            // TODO: Removed to prevent iOS from crashing.
-            // Perhaps a better apporach is to set with setSize
-            // and then set to window native on animationComplete.
-            // if (latestLayout.current) {
-            //     const { x, y } = latestLayout.current
-            //     const xRatio = calcLength(newProjection.x) / calcLength(x)
-            //     const yRatio = calcLength(newProjection.y) / calcLength(y)
-            //     gl.setPixelRatio(
-            //         Math.max(xRatio, yRatio) * window.devicePixelRatio
-            //     )
-            // }
             updateCamera(calcBoxSize(newProjection));
             advance(getFrameData().timestamp);
         });
@@ -54,10 +42,17 @@ function useLayoutCamera(_a, updateCamera) {
          * output to match the layout dimensions.
          */
         var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
-            latestLayout.current = newLayout;
             var newSize = calcBoxSize(newLayout);
             gl.setSize(newSize.width, newSize.height);
-            setSize(newSize);
+            var dpr;
+            if (newSize.width < size.width ||
+                newSize.height < size.height) {
+                var xScale = size.width / newSize.width;
+                var yScale = size.height / newSize.height;
+                var maxScale = Math.max(xScale, yScale);
+                dpr = Math.min(maxScale, 8);
+            }
+            setDimensions({ size: newSize, dpr: dpr });
         });
         /**
          * When a projection animation completes we want to update the camera to
@@ -65,14 +60,18 @@ function useLayoutCamera(_a, updateCamera) {
          */
         var removeAnimationCompleteListener = projection.addEventListener("animationComplete", function () {
             var actual = (projection.layout || {}).actual;
-            actual && updateCamera(calcBoxSize(actual));
+            if (actual) {
+                var newSize = calcBoxSize(actual);
+                updateCamera(newSize);
+                setDimensions({ size: newSize });
+            }
         });
         return function () {
             removeProjectionUpdateListener();
             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.1",
+    "version": "5.5.2",
     "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,11 +1,13 @@
+import { Size } from "@react-three/fiber";
 import { RefObject, Ref } from "react";
+export declare type DimensionsState = {
+    size: Size;
+    dpr?: number;
+};
 export declare type SetLayoutCamera = (ref: Ref<any>) => void;
-export declare type SetSize = (size: {
-    width: number;
-    height: number;
-}) => void;
+export declare type SetDimensions = (state: DimensionsState) => void;
 export interface MotionCanvasContextProps {
     layoutCamera: RefObject<any>;
-    setSize: SetSize;
+    setDimensions: SetDimensions;
 }
 export declare const MotionCanvasContext: import("react").Context<MotionCanvasContextProps | undefined>;