framer-motion 5.5.2 → 5.5.6-beta.0

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-3615b5bb.js');
 var React = require('react');
 var styleValueTypes = require('style-value-types');
 var popmotion = require('popmotion');
@@ -499,8 +499,8 @@ var camelCaseAttributes = new Set([
     "pathLength",
 ]);
 
-function renderSVG(element, renderState) {
-    renderHTML(element, renderState);
+function renderSVG(element, renderState, styleProp, projection) {
+    renderHTML(element, renderState, styleProp, projection);
     for (var key in renderState.attrs) {
         element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
     }
@@ -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) {
@@ -2787,6 +2768,30 @@ function isLazyBundle(features) {
     return typeof features === "function";
 }
 
+function LayoutSVGComponent(_a, ref) {
+    var children = _a.children, props = tslib.__rest(_a, ["children"]);
+    var viewBox = useMotionValue.useMotionValue(props.viewBox);
+    return (React__namespace.createElement(motion.svg, tslib.__assign({ ref: ref }, props, { viewBox: viewBox, layout: true, preserveAspectRatio: "none" }),
+        React__namespace.createElement(ProjectViewBox, { viewBox: viewBox }),
+        children));
+}
+function ProjectViewBox(_a) {
+    var viewBox = _a.viewBox;
+    var svgVisualElement = useMotionValue.useVisualElementContext();
+    React.useEffect(function () {
+        var _a;
+        return (_a = svgVisualElement === null || svgVisualElement === void 0 ? void 0 : svgVisualElement.projection) === null || _a === void 0 ? void 0 : _a.addEventListener("projectionUpdate", function (_a) {
+            var x = _a.x, y = _a.y;
+            // TODO: A reveal option could be added where 0 0 is
+            // x.min, y.min
+            // viewBox.set(`0 0 ${calcLength(x)} ${calcLength(y)}`)
+            viewBox.set("".concat(x.min, " ").concat(y.min, " ").concat(useMotionValue.calcLength(x), " ").concat(useMotionValue.calcLength(y)));
+        });
+    }, [svgVisualElement]);
+    return null;
+}
+var LayoutSVG = React__namespace.forwardRef(LayoutSVGComponent);
+
 var ReorderContext = React.createContext(null);
 
 function checkReorder(order, value, offset, velocity) {
@@ -3543,7 +3548,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 () {
         /**
@@ -3693,6 +3698,7 @@ exports.AnimateSharedLayout = AnimateSharedLayout;
 exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
 exports.DragControls = DragControls;
 exports.LayoutGroup = LayoutGroup;
+exports.LayoutSVG = LayoutSVG;
 exports.LazyMotion = LazyMotion;
 exports.MotionConfig = MotionConfig;
 exports.Reorder = Reorder;

package/dist/cjs/{three-entry.js → three.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-3615b5bb.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 }; }
@@ -295,6 +295,12 @@ var motion = new Proxy(custom, {
 
 var MotionCanvasContext = React.createContext(undefined);
 
+var devicePixelRatio = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+var calculateDpr = function (dpr) {
+    return Array.isArray(dpr)
+        ? popmotion.clamp(dpr[0], dpr[1], devicePixelRatio)
+        : dpr || devicePixelRatio;
+};
 /**
  * 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
@@ -336,26 +342,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 +374,11 @@ 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,
+                        requestedDpr: calculateDpr(props.dpr),
+                    } },
                     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 +402,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, requestedDpr = _c.requestedDpr;
     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 +421,25 @@ 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);
+            var dpr = requestedDpr;
+            var _a = dimensions.current.size, width = _a.width, height = _a.height;
+            var xScale = width / newSize.width;
+            var yScale = height / newSize.height;
+            var maxScale = Math.max(xScale, yScale);
+            dpr = popmotion.clamp(0.75, 4, maxScale);
+            dimensions.current = {
+                size: { width: newSize.width, height: newSize.height },
+                dpr: dpr,
+            };
             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 });
+            gl.setPixelRatio(dpr);
         });
         /**
          * When a projection animation completes we want to update the camera to
@@ -434,9 +448,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(requestedDpr);
+                }, 50);
             }
         });
         return function () {
@@ -444,7 +462,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-3615b5bb.js}

@@ -2983,7 +2983,7 @@ function createMotionComponent(_a) {
          * shared element transitions however. Perhaps for those we could revert to a root node
          * that gets forceRendered and layout animations are triggered on its layout effect.
          */
-        var projectionId = useProjectionId();
+        var projectionId = config.isStatic ? undefined : useProjectionId();
         /**
          *
          */
@@ -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/LayoutSVG.mjs

@@ -0,0 +1,33 @@
+import { __rest, __assign } from 'tslib';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { motion } from '../render/dom/motion.mjs';
+import { useMotionValue } from '../value/use-motion-value.mjs';
+import { useVisualElementContext } from '../context/MotionContext/index.mjs';
+import { calcLength } from '../projection/geometry/delta-calc.mjs';
+
+function LayoutSVGComponent(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var viewBox = useMotionValue(props.viewBox);
+    return (React.createElement(motion.svg, __assign({ ref: ref }, props, { viewBox: viewBox, layout: true, preserveAspectRatio: "none" }),
+        React.createElement(ProjectViewBox, { viewBox: viewBox }),
+        children));
+}
+function ProjectViewBox(_a) {
+    var viewBox = _a.viewBox;
+    var svgVisualElement = useVisualElementContext();
+    useEffect(function () {
+        var _a;
+        return (_a = svgVisualElement === null || svgVisualElement === void 0 ? void 0 : svgVisualElement.projection) === null || _a === void 0 ? void 0 : _a.addEventListener("projectionUpdate", function (_a) {
+            var x = _a.x, y = _a.y;
+            // TODO: A reveal option could be added where 0 0 is
+            // x.min, y.min
+            // viewBox.set(`0 0 ${calcLength(x)} ${calcLength(y)}`)
+            viewBox.set("".concat(x.min, " ").concat(y.min, " ").concat(calcLength(x), " ").concat(calcLength(y)));
+        });
+    }, [svgVisualElement]);
+    return null;
+}
+var LayoutSVG = React.forwardRef(LayoutSVGComponent);
+
+export { LayoutSVG, LayoutSVGComponent };

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

@@ -1,13 +1,21 @@
 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';
+import { clamp } from 'popmotion';
 
+var devicePixelRatio = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+var calculateDpr = function (dpr) {
+    return Array.isArray(dpr)
+        ? clamp(dpr[0], dpr[1], devicePixelRatio)
+        : dpr || devicePixelRatio;
+};
 /**
  * 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
@@ -49,26 +57,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 +89,11 @@ 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,
+                        requestedDpr: calculateDpr(props.dpr),
+                    } },
                     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,10 @@
-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';
+import { clamp } from 'popmotion';
 
 var calcBoxSize = function (_a) {
     var x = _a.x, y = _a.y;
@@ -17,15 +17,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, requestedDpr = _c.requestedDpr;
     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 +36,25 @@ 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);
+            var dpr = requestedDpr;
+            var _a = dimensions.current.size, width = _a.width, height = _a.height;
+            var xScale = width / newSize.width;
+            var yScale = height / newSize.height;
+            var maxScale = Math.max(xScale, yScale);
+            dpr = clamp(0.75, 4, maxScale);
+            dimensions.current = {
+                size: { width: newSize.width, height: newSize.height },
+                dpr: dpr,
+            };
             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 });
+            gl.setPixelRatio(dpr);
         });
         /**
          * When a projection animation completes we want to update the camera to
@@ -61,9 +63,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(requestedDpr);
+                }, 50);
             }
         });
         return function () {
@@ -71,7 +77,7 @@ function useLayoutCamera(_a, updateCamera) {
             removeLayoutMeasureListener();
             removeAnimationCompleteListener();
         };
-    }, [size]);
+    }, []);
     useLayoutEffect(function () {
         var cam = layoutCamera.current;
         if (makeDefault && cam) {

package/dist/es/index.mjs

@@ -5,6 +5,7 @@ export { AnimateSharedLayout } from './components/AnimateSharedLayout.mjs';
 export { MotionConfig } from './components/MotionConfig/index.mjs';
 export { LazyMotion } from './components/LazyMotion/index.mjs';
 export { LayoutGroup } from './components/LayoutGroup/index.mjs';
+export { LayoutSVG } from './components/LayoutSVG.mjs';
 export { Reorder } from './components/Reorder/index.mjs';
 export { domAnimation } from './render/dom/features-animation.mjs';
 export { domMax } from './render/dom/features-max.mjs';

package/dist/es/motion/index.mjs

@@ -51,7 +51,7 @@ function createMotionComponent(_a) {
          * shared element transitions however. Perhaps for those we could revert to a root node
          * that gets forceRendered and layout animations are triggered on its layout effect.
          */
-        var projectionId = useProjectionId();
+        var projectionId = config.isStatic ? undefined : useProjectionId();
         /**
          *
          */

package/dist/es/render/svg/utils/render.mjs

@@ -2,8 +2,8 @@ import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';
 import { renderHTML } from '../../html/utils/render.mjs';
 import { camelCaseAttributes } from './camel-case-attrs.mjs';
 
-function renderSVG(element, renderState) {
-    renderHTML(element, renderState);
+function renderSVG(element, renderState, styleProp, projection) {
+    renderHTML(element, renderState, styleProp, projection);
     for (var key in renderState.attrs) {
         element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
     }