framer-motion 5.4.5 → 5.5.2

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-73ed7c77.js');
+var useMotionValue = require('./use-motion-value-28b1fded.js');
 var React = require('react');
 var styleValueTypes = require('style-value-types');
 var popmotion = require('popmotion');
@@ -3672,6 +3672,7 @@ function useInvertedScale(scale) {
 exports.FlatTree = useMotionValue.FlatTree;
 exports.LayoutGroupContext = useMotionValue.LayoutGroupContext;
 exports.MotionConfigContext = useMotionValue.MotionConfigContext;
+exports.MotionContext = useMotionValue.MotionContext;
 exports.MotionValue = useMotionValue.MotionValue;
 exports.PresenceContext = useMotionValue.PresenceContext;
 exports.SwitchLayoutGroupContext = useMotionValue.SwitchLayoutGroupContext;

package/dist/cjs/three-entry.js

@@ -3,15 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-73ed7c77.js');
+var useMotionValue = require('./use-motion-value-28b1fded.js');
 var React = require('react');
 var popmotion = require('popmotion');
 var three = require('three');
 var mergeRefs = require('react-merge-refs');
-var useMeasure = require('react-use-measure');
 var fiber = require('@react-three/fiber');
-require('hey-listen');
-require('framesync');
+var heyListen = require('hey-listen');
+var sync = require('framesync');
 require('style-value-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var useMeasure__default = /*#__PURE__*/_interopDefaultLegacy(useMeasure);
 
 function useHover(isStatic, _a, visualElement) {
     var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, onPointerOver = _a.onPointerOver, onPointerOut = _a.onPointerOut;
@@ -189,9 +187,10 @@ var readers = {
     rotateZ: readRotation("z"),
 };
 function readAnimatableValue(value) {
-    if (!value)
+    if (value === undefined) {
         return;
-    if (value instanceof three.Color) {
+    }
+    else if (value instanceof three.Color) {
         return value.getStyle();
     }
     else {
@@ -247,7 +246,8 @@ var threeVisualElement = useMotionValue.visualElement({
     sortNodePosition: function (a, b) {
         return a.id - b.id;
     },
-    makeTargetAnimatable: function (element, target) {
+    makeTargetAnimatable: function (element, _a) {
+        _a.transition; var target = tslib.__rest(_a, ["transition"]);
         useMotionValue.checkTargetForNewValues(element, target, {});
         return target;
     },
@@ -293,6 +293,15 @@ var motion = new Proxy(custom, {
     },
 });
 
+var MotionCanvasContext = React.createContext(undefined);
+
+/**
+ * This file contains a version of R3F's Canvas component that uses our projection
+ * system for layout measurements instead of use-react-measure so we can keep the
+ * projection and cameras in sync.
+ *
+ * https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/web/Canvas.tsx
+ */
 function Block(_a) {
     var set = _a.set;
     useMotionValue.useIsomorphicLayoutEffect(function () {
@@ -317,32 +326,49 @@ var ErrorBoundary = /** @class */ (function (_super) {
     ErrorBoundary.getDerivedStateFromError = function () { return ({ error: true }); };
     return ErrorBoundary;
 }(React__namespace.Component));
-/**
- * A synchronously rendering version of R3F's Canvas component. We call render
- * within the render function itself to ensure lifecycle events are called before
- * parent reconcilers. This can be replaced with a simple MotionContext provider
- * when R3F moves to the same model.
- */
-function SyncCanvasComponent(_a, forwardedRef) {
-    var children = _a.children, fallback = _a.fallback, tabIndex = _a.tabIndex, resize = _a.resize, id = _a.id, style = _a.style, className = _a.className, events = _a.events, props = tslib.__rest(_a, ["children", "fallback", "tabIndex", "resize", "id", "style", "className", "events"]);
+function CanvasComponent(_a, forwardedRef) {
+    var children = _a.children, fallback = _a.fallback, tabIndex = _a.tabIndex, id = _a.id, style = _a.style, className = _a.className, events = _a.events, props = tslib.__rest(_a, ["children", "fallback", "tabIndex", "id", "style", "className", "events"]);
+    /**
+     * Import existing contexts to pass through variants and MotionConfig from
+     * the DOM to the 3D tree. Shared variants aren't officially supported yet
+     * because the parent DOM tree fires effects before the 3D tree, whereas
+     * variants are expected to run from bottom-up in useEffect.
+     */
     var motionContext = React.useContext(useMotionValue.MotionContext);
     var configContext = React.useContext(useMotionValue.MotionConfigContext);
-    var _b = tslib.__read(useMeasure__default["default"](tslib.__assign({ scroll: true, debounce: { scroll: 50, resize: 0 } }, resize)), 2), containerRef = _b[0], _c = _b[1], width = _c.width, height = _c.height;
+    var layoutCamera = React.useRef(null);
+    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;
+        setDimensions({
+            size: {
+                width: container.offsetWidth,
+                height: container.offsetHeight,
+            },
+        });
+    };
+    // Set canvas size on mount
+    React.useLayoutEffect(handleResize, []);
     var canvasRef = React__namespace.useRef(null);
-    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];
+    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];
     // Suspend this component if block is a promise (2nd run)
     if (block)
         throw block;
     // Throw exception outwards if anything within canvas throws
     if (error)
         throw error;
-    // Execute JSX in the reconciler as a layout-effect
-    if (width > 0 && height > 0) {
+    // Only render the R3F tree once we have recorded dimensions for the canvas.
+    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(useMotionValue.MotionConfigContext.Provider, { value: configContext },
-                    React__namespace.createElement(useMotionValue.MotionContext.Provider, { value: motionContext }, children)))), canvasRef.current, tslib.__assign(tslib.__assign({}, props), { size: { width: width, height: height }, events: events || fiber.events }));
+                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), { dpr: dpr || props.dpr, size: size, events: events || fiber.events }));
     }
     useMotionValue.useIsomorphicLayoutEffect(function () {
         var container = canvasRef.current;
@@ -351,7 +377,112 @@ function SyncCanvasComponent(_a, forwardedRef) {
     return (React__namespace.createElement("div", { ref: containerRef, id: id, className: className, tabIndex: tabIndex, style: tslib.__assign({ position: "relative", width: "100%", height: "100%", overflow: "hidden" }, style) },
         React__namespace.createElement("canvas", { ref: mergeRefs__default["default"]([canvasRef, forwardedRef]), style: { display: "block" } }, fallback)));
 }
-var MotionCanvas = React.forwardRef(SyncCanvasComponent);
+var MotionCanvas = React.forwardRef(CanvasComponent);
+
+var calcBoxSize = function (_a) {
+    var x = _a.x, y = _a.y;
+    return ({
+        width: useMotionValue.calcLength(x),
+        height: useMotionValue.calcLength(y),
+    });
+};
+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 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();
+    React.useLayoutEffect(function () {
+        updateCamera(size);
+        var projection = parentVisualElement === null || parentVisualElement === void 0 ? void 0 : parentVisualElement.projection;
+        if (!projection)
+            return;
+        /**
+         * 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);
+        });
+        /**
+         * 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 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
+         * match the recorded layout of the element.
+         */
+        var removeAnimationCompleteListener = projection.addEventListener("animationComplete", function () {
+            var actual = (projection.layout || {}).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) {
+            var oldCam_1 = camera;
+            set(function () { return ({ camera: cam }); });
+            return function () { return set(function () { return ({ camera: oldCam_1 }); }); };
+        }
+    }, [camera, layoutCamera, makeDefault, set]);
+    return { size: size, camera: camera, cameraRef: layoutCamera };
+}
+
+/**
+ * Adapted from https://github.com/pmndrs/drei/blob/master/src/core/PerspectiveCamera.tsx
+ */
+var LayoutCamera = React__namespace.forwardRef(function (props, ref) {
+    var cameraRef = useLayoutCamera(props, function (size) {
+        var cam = cameraRef.current;
+        if (cam && !props.manual) {
+            cam.aspect = size.width / size.height;
+            cam.updateProjectionMatrix();
+        }
+    }).cameraRef;
+    return (React__namespace.createElement(motion.perspectiveCamera, tslib.__assign({ ref: mergeRefs__default["default"]([cameraRef, ref]) }, props)));
+});
+
+var LayoutOrthographicCamera = React__namespace.forwardRef(function (props, ref) {
+    var _a = useLayoutCamera(props, function (newSize) {
+        var cam = cameraRef.current;
+        if (cam) {
+            cam.left = newSize.width / -2;
+            cam.right = newSize.width / 2;
+            cam.top = newSize.height / 2;
+            cam.bottom = newSize.height / -2;
+            cam.updateProjectionMatrix();
+        }
+    }), size = _a.size, cameraRef = _a.cameraRef;
+    return (React__namespace.createElement(motion.orthographicCamera, tslib.__assign({ left: size.width / -2, right: size.width / 2, top: size.height / 2, bottom: size.height / -2, ref: mergeRefs__default["default"]([cameraRef, ref]) }, props)));
+});
 
 function useTime() {
     var time = useMotionValue.useMotionValue(0);
@@ -359,6 +490,8 @@ function useTime() {
     return time;
 }
 
+exports.LayoutCamera = LayoutCamera;
+exports.LayoutOrthographicCamera = LayoutOrthographicCamera;
 exports.MotionCanvas = MotionCanvas;
 exports.motion = motion;
 exports.useTime = useTime;

package/dist/cjs/{use-motion-value-73ed7c77.js → use-motion-value-28b1fded.js}

@@ -2119,7 +2119,7 @@ function createProjectionNode(_a) {
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
-            this.notifyListeners("measure");
+            this.notifyListeners("measure", this.layout.actual);
             (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notifyLayoutMeasure(this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
         };
         ProjectionNode.prototype.updateScroll = function () {
@@ -2388,6 +2388,7 @@ function createProjectionNode(_a) {
                 this.treeScale.y !== prevTreeScaleY) {
                 this.hasProjected = true;
                 this.scheduleRender();
+                this.notifyListeners("projectionUpdate", target);
             }
         };
         ProjectionNode.prototype.hide = function () {
@@ -2490,6 +2491,7 @@ function createProjectionNode(_a) {
                 this.currentAnimation =
                     this.animationValues =
                         undefined;
+            this.notifyListeners("animationComplete");
         };
         ProjectionNode.prototype.finishAnimation = function () {
             var _a;

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

@@ -0,0 +1,21 @@
+import { __assign } from 'tslib';
+import * as React from 'react';
+import mergeRefs from 'react-merge-refs';
+import { motion } from '../../render/three/motion.mjs';
+import { useLayoutCamera } from './use-layout-camera.mjs';
+
+/**
+ * Adapted from https://github.com/pmndrs/drei/blob/master/src/core/PerspectiveCamera.tsx
+ */
+var LayoutCamera = React.forwardRef(function (props, ref) {
+    var cameraRef = useLayoutCamera(props, function (size) {
+        var cam = cameraRef.current;
+        if (cam && !props.manual) {
+            cam.aspect = size.width / size.height;
+            cam.updateProjectionMatrix();
+        }
+    }).cameraRef;
+    return (React.createElement(motion.perspectiveCamera, __assign({ ref: mergeRefs([cameraRef, ref]) }, props)));
+});
+
+export { LayoutCamera };

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

@@ -0,0 +1,21 @@
+import { __assign } from 'tslib';
+import * as React from 'react';
+import mergeRefs from 'react-merge-refs';
+import { motion } from '../../render/three/motion.mjs';
+import { useLayoutCamera } from './use-layout-camera.mjs';
+
+var LayoutOrthographicCamera = React.forwardRef(function (props, ref) {
+    var _a = useLayoutCamera(props, function (newSize) {
+        var cam = cameraRef.current;
+        if (cam) {
+            cam.left = newSize.width / -2;
+            cam.right = newSize.width / 2;
+            cam.top = newSize.height / 2;
+            cam.bottom = newSize.height / -2;
+            cam.updateProjectionMatrix();
+        }
+    }), size = _a.size, cameraRef = _a.cameraRef;
+    return (React.createElement(motion.orthographicCamera, __assign({ left: size.width / -2, right: size.width / 2, top: size.height / 2, bottom: size.height / -2, ref: mergeRefs([cameraRef, ref]) }, props)));
+});
+
+export { LayoutOrthographicCamera };

package/dist/es/components/{MotionCanvas/index.mjs → three/MotionCanvas.mjs}

@@ -1,13 +1,20 @@
 import { __extends, __rest, __read, __assign } from 'tslib';
 import * as React from 'react';
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useRef, useState, useLayoutEffect } from 'react';
 import { MotionContext } from '../../context/MotionContext/index.mjs';
 import mergeRefs from 'react-merge-refs';
-import useMeasure from 'react-use-measure';
 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';
 
+/**
+ * This file contains a version of R3F's Canvas component that uses our projection
+ * system for layout measurements instead of use-react-measure so we can keep the
+ * projection and cameras in sync.
+ *
+ * https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/web/Canvas.tsx
+ */
 function Block(_a) {
     var set = _a.set;
     useIsomorphicLayoutEffect(function () {
@@ -32,32 +39,49 @@ var ErrorBoundary = /** @class */ (function (_super) {
     ErrorBoundary.getDerivedStateFromError = function () { return ({ error: true }); };
     return ErrorBoundary;
 }(React.Component));
-/**
- * A synchronously rendering version of R3F's Canvas component. We call render
- * within the render function itself to ensure lifecycle events are called before
- * parent reconcilers. This can be replaced with a simple MotionContext provider
- * when R3F moves to the same model.
- */
-function SyncCanvasComponent(_a, forwardedRef) {
-    var children = _a.children, fallback = _a.fallback, tabIndex = _a.tabIndex, resize = _a.resize, id = _a.id, style = _a.style, className = _a.className, events$1 = _a.events, props = __rest(_a, ["children", "fallback", "tabIndex", "resize", "id", "style", "className", "events"]);
+function CanvasComponent(_a, forwardedRef) {
+    var children = _a.children, fallback = _a.fallback, tabIndex = _a.tabIndex, id = _a.id, style = _a.style, className = _a.className, events$1 = _a.events, props = __rest(_a, ["children", "fallback", "tabIndex", "id", "style", "className", "events"]);
+    /**
+     * Import existing contexts to pass through variants and MotionConfig from
+     * the DOM to the 3D tree. Shared variants aren't officially supported yet
+     * because the parent DOM tree fires effects before the 3D tree, whereas
+     * variants are expected to run from bottom-up in useEffect.
+     */
     var motionContext = useContext(MotionContext);
     var configContext = useContext(MotionConfigContext);
-    var _b = __read(useMeasure(__assign({ scroll: true, debounce: { scroll: 50, resize: 0 } }, resize)), 2), containerRef = _b[0], _c = _b[1], width = _c.width, height = _c.height;
+    var layoutCamera = useRef(null);
+    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;
+        setDimensions({
+            size: {
+                width: container.offsetWidth,
+                height: container.offsetHeight,
+            },
+        });
+    };
+    // Set canvas size on mount
+    useLayoutEffect(handleResize, []);
     var canvasRef = React.useRef(null);
-    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];
+    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];
     // Suspend this component if block is a promise (2nd run)
     if (block)
         throw block;
     // Throw exception outwards if anything within canvas throws
     if (error)
         throw error;
-    // Execute JSX in the reconciler as a layout-effect
-    if (width > 0 && height > 0) {
+    // Only render the R3F tree once we have recorded dimensions for the canvas.
+    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(MotionConfigContext.Provider, { value: configContext },
-                    React.createElement(MotionContext.Provider, { value: motionContext }, children)))), canvasRef.current, __assign(__assign({}, props), { size: { width: width, height: height }, events: events$1 || events }));
+                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), { dpr: dpr || props.dpr, size: size, events: events$1 || events }));
     }
     useIsomorphicLayoutEffect(function () {
         var container = canvasRef.current;
@@ -66,6 +90,6 @@ function SyncCanvasComponent(_a, forwardedRef) {
     return (React.createElement("div", { ref: containerRef, id: id, className: className, tabIndex: tabIndex, style: __assign({ position: "relative", width: "100%", height: "100%", overflow: "hidden" }, style) },
         React.createElement("canvas", { ref: mergeRefs([canvasRef, forwardedRef]), style: { display: "block" } }, fallback)));
 }
-var MotionCanvas = forwardRef(SyncCanvasComponent);
+var MotionCanvas = forwardRef(CanvasComponent);
 
 export { MotionCanvas };

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

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+var MotionCanvasContext = createContext(undefined);
+
+export { MotionCanvasContext };

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

@@ -0,0 +1,86 @@
+import { useContext, 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;
+    return ({
+        width: calcLength(x),
+        height: calcLength(y),
+    });
+};
+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 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();
+    useLayoutEffect(function () {
+        updateCamera(size);
+        var projection = parentVisualElement === null || parentVisualElement === void 0 ? void 0 : parentVisualElement.projection;
+        if (!projection)
+            return;
+        /**
+         * 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);
+        });
+        /**
+         * 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 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
+         * match the recorded layout of the element.
+         */
+        var removeAnimationCompleteListener = projection.addEventListener("animationComplete", function () {
+            var actual = (projection.layout || {}).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) {
+            var oldCam_1 = camera;
+            set(function () { return ({ camera: cam }); });
+            return function () { return set(function () { return ({ camera: oldCam_1 }); }); };
+        }
+    }, [camera, layoutCamera, makeDefault, set]);
+    return { size: size, camera: camera, cameraRef: layoutCamera };
+}
+
+export { useLayoutCamera };

package/dist/es/context/MotionContext/index.mjs

@@ -1,4 +1,4 @@
-import { useContext, createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 var MotionContext = createContext({});
 function useVisualElementContext() {

package/dist/es/index.mjs

@@ -36,6 +36,7 @@ export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
 export { useInstantTransition } from './utils/use-instant-transition.mjs';
 export { useInstantLayoutTransition } from './projection/use-instant-layout-transition.mjs';
 export { useResetProjection } from './projection/use-reset-projection.mjs';
+export { MotionContext } from './context/MotionContext/index.mjs';
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';
 export { PresenceContext } from './context/PresenceContext.mjs';
 export { LayoutGroupContext } from './context/LayoutGroupContext.mjs';

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

@@ -430,7 +430,7 @@ function createProjectionNode(_a) {
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
-            this.notifyListeners("measure");
+            this.notifyListeners("measure", this.layout.actual);
             (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notifyLayoutMeasure(this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
         };
         ProjectionNode.prototype.updateScroll = function () {
@@ -699,6 +699,7 @@ function createProjectionNode(_a) {
                 this.treeScale.y !== prevTreeScaleY) {
                 this.hasProjected = true;
                 this.scheduleRender();
+                this.notifyListeners("projectionUpdate", target);
             }
         };
         ProjectionNode.prototype.hide = function () {
@@ -801,6 +802,7 @@ function createProjectionNode(_a) {
                 this.currentAnimation =
                     this.animationValues =
                         undefined;
+            this.notifyListeners("animationComplete");
         };
         ProjectionNode.prototype.finishAnimation = function () {
             var _a;

package/dist/es/render/three/create-visual-element.mjs

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import { visualElement } from '../index.mjs';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { checkTargetForNewValues } from '../utils/setters.mjs';
@@ -15,7 +16,8 @@ var threeVisualElement = visualElement({
     sortNodePosition: function (a, b) {
         return a.id - b.id;
     },
-    makeTargetAnimatable: function (element, target) {
+    makeTargetAnimatable: function (element, _a) {
+        _a.transition; var target = __rest(_a, ["transition"]);
         checkTargetForNewValues(element, target, {});
         return target;
     },

package/dist/es/render/three/utils/read-value.mjs

@@ -24,9 +24,10 @@ var readers = {
     rotateZ: readRotation("z"),
 };
 function readAnimatableValue(value) {
-    if (!value)
+    if (value === undefined) {
         return;
-    if (value instanceof Color) {
+    }
+    else if (value instanceof Color) {
         return value.getStyle();
     }
     else {

package/dist/es/three-entry.mjs

@@ -1,3 +1,5 @@
 export { motion } from './render/three/motion.mjs';
-export { MotionCanvas } from './components/MotionCanvas/index.mjs';
+export { MotionCanvas } from './components/three/MotionCanvas.mjs';
+export { LayoutCamera } from './components/three/LayoutCamera.mjs';
+export { LayoutOrthographicCamera } from './components/three/LayoutOrthographicCamera.mjs';
 export { useTime } from './render/three/utils/use-time.mjs';

package/dist/framer-motion.dev.js

@@ -3354,7 +3354,7 @@
                 this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
                 this.projectionDelta = undefined;
-                this.notifyListeners("measure");
+                this.notifyListeners("measure", this.layout.actual);
                 (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notifyLayoutMeasure(this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
             };
             ProjectionNode.prototype.updateScroll = function () {
@@ -3623,6 +3623,7 @@
                     this.treeScale.y !== prevTreeScaleY) {
                     this.hasProjected = true;
                     this.scheduleRender();
+                    this.notifyListeners("projectionUpdate", target);
                 }
             };
             ProjectionNode.prototype.hide = function () {
@@ -3725,6 +3726,7 @@
                     this.currentAnimation =
                         this.animationValues =
                             undefined;
+                this.notifyListeners("animationComplete");
             };
             ProjectionNode.prototype.finishAnimation = function () {
                 var _a;
@@ -9530,6 +9532,7 @@
     exports.LazyMotion = LazyMotion;
     exports.MotionConfig = MotionConfig;
     exports.MotionConfigContext = MotionConfigContext;
+    exports.MotionContext = MotionContext;
     exports.MotionValue = MotionValue;
     exports.PresenceContext = PresenceContext;
     exports.Reorder = Reorder;