framer-motion 6.2.10 → 6.3.2

package/dist/cjs/index.js

@@ -141,7 +141,7 @@ function useVisualElementContext() {
  */
 var PresenceContext = React.createContext(null);
 
-var isBrowser = typeof window !== "undefined";
+var isBrowser = typeof document !== "undefined";
 
 var useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
@@ -150,7 +150,7 @@ var prefersReducedMotion = { current: null };
 var hasDetected = false;
 function initPrefersReducedMotion() {
     hasDetected = true;
-    if (typeof window === "undefined")
+    if (!isBrowser)
         return;
     if (window.matchMedia) {
         var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
@@ -1998,7 +1998,7 @@ function createProjectionNode(_a) {
                     }
                     // TODO: Check here if an animation exists
                     var layoutTransition = (_c = (_b = _this.options.transition) !== null && _b !== void 0 ? _b : visualElement.getDefaultTransition()) !== null && _c !== void 0 ? _c : defaultLayoutTransition;
-                    var onLayoutAnimationComplete = visualElement.getProps().onLayoutAnimationComplete;
+                    var _g = visualElement.getProps(), onLayoutAnimationStart = _g.onLayoutAnimationStart, onLayoutAnimationComplete = _g.onLayoutAnimationComplete;
                     /**
                      * The target layout of the element might stay the same,
                      * but its position relative to its parent has changed.
@@ -2021,7 +2021,7 @@ function createProjectionNode(_a) {
                             _this.resumingFrom.resumingFrom = undefined;
                         }
                         _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                        var animationOptions = tslib.__assign(tslib.__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete });
+                        var animationOptions = tslib.__assign(tslib.__assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
                         if (visualElement.shouldReduceMotion) {
                             animationOptions.delay = 0;
                             animationOptions.type = false;
@@ -2554,6 +2554,7 @@ function createProjectionNode(_a) {
         ProjectionNode.prototype.startAnimation = function (options) {
             var _this = this;
             var _a, _b;
+            this.notifyListeners("animationStart");
             (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
             if (this.resumingFrom) {
                 (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop();
@@ -3458,6 +3459,7 @@ var validMotionProps = new Set([
     "layout",
     "layoutId",
     "layoutDependency",
+    "onLayoutAnimationStart",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
     "onBeforeLayoutMeasure",
@@ -5907,6 +5909,7 @@ var names = [
     "AnimationComplete",
     "LayoutAnimationComplete",
     "AnimationStart",
+    "LayoutAnimationStart",
     "SetAxisTarget",
     "Unmount",
 ];
@@ -7413,6 +7416,9 @@ var LayoutGroup = function (_a) {
 var id = 0;
 var AnimateSharedLayout = function (_a) {
     var children = _a.children;
+    React__namespace.useEffect(function () {
+        heyListen.warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+    }, []);
     return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
 };
 
@@ -7699,7 +7705,7 @@ function useDefaultMotionValue(value, defaultValue) {
     return isMotionValue(value) ? value : useMotionValue(defaultValue);
 }
 function ReorderItem(_a, externalRef) {
-    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, props = tslib.__rest(_a, ["children", "style", "value", "as", "onDrag"]);
+    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, _c = _a.layout, layout = _c === void 0 ? true : _c, props = tslib.__rest(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
     var Component = useConstant(function () { return motion(as); });
     var context = React.useContext(ReorderContext);
     var point = {
@@ -7710,19 +7716,19 @@ function ReorderItem(_a, externalRef) {
         var _b = tslib.__read(_a, 2), latestX = _b[0], latestY = _b[1];
         return latestX || latestY ? 1 : "unset";
     });
-    var layout = React.useRef(null);
+    var measuredLayout = React.useRef(null);
     heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
-    var _c = context, axis = _c.axis, registerItem = _c.registerItem, updateOrder = _c.updateOrder;
+    var _d = context, axis = _d.axis, registerItem = _d.registerItem, updateOrder = _d.updateOrder;
     React.useEffect(function () {
-        registerItem(value, layout.current);
+        registerItem(value, measuredLayout.current);
     }, [context]);
-    return (React__namespace.createElement(Component, tslib.__assign({ drag: axis }, props, { dragSnapToOrigin: true, style: tslib.__assign(tslib.__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (event, gesturePoint) {
+    return (React__namespace.createElement(Component, tslib.__assign({ drag: axis }, props, { dragSnapToOrigin: true, style: tslib.__assign(tslib.__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: layout, onDrag: function (event, gesturePoint) {
             var velocity = gesturePoint.velocity;
             velocity[axis] &&
                 updateOrder(value, point[axis].get(), velocity[axis]);
             onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, gesturePoint);
         }, onLayoutMeasure: function (measured) {
-            layout.current = measured;
+            measuredLayout.current = measured;
         }, ref: externalRef }), children));
 }
 var Item = React.forwardRef(ReorderItem);
@@ -7938,8 +7944,6 @@ function getViewportScrollOffsets() {
 var hasListeners = false;
 function addEventListeners() {
     hasListeners = true;
-    if (typeof window === "undefined")
-        return;
     var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
     addDomEvent(window, "scroll", updateScrollValues, { passive: true });
     addDomEvent(window, "resize", updateScrollValues);
@@ -8142,16 +8146,14 @@ function useCycle() {
     }
     var index = React.useRef(0);
     var _a = tslib.__read(React.useState(items[index.current]), 2), item = _a[0], setItem = _a[1];
-    return [
-        item,
-        function (next) {
-            index.current =
-                typeof next !== "number"
-                    ? popmotion.wrap(0, items.length, index.current + 1)
-                    : next;
-            setItem(items[index.current]);
-        },
-    ];
+    var runCycle = React.useCallback(function (next) {
+        index.current =
+            typeof next !== "number"
+                ? popmotion.wrap(0, items.length, index.current + 1)
+                : next;
+        setItem(items[index.current]);
+    }, tslib.__spreadArray([items.length], tslib.__read(items), false));
+    return [item, runCycle];
 }
 
 /**

package/dist/es/components/AnimateSharedLayout.mjs

@@ -1,3 +1,4 @@
+import { warning } from 'hey-listen';
 import * as React from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { LayoutGroup } from './LayoutGroup/index.mjs';
@@ -5,6 +6,9 @@ import { LayoutGroup } from './LayoutGroup/index.mjs';
 var id = 0;
 var AnimateSharedLayout = function (_a) {
     var children = _a.children;
+    React.useEffect(function () {
+        warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+    }, []);
     return (React.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
 };
 

package/dist/es/components/Reorder/Item.mjs

@@ -14,7 +14,7 @@ function useDefaultMotionValue(value, defaultValue) {
     return isMotionValue(value) ? value : useMotionValue(defaultValue);
 }
 function ReorderItem(_a, externalRef) {
-    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, props = __rest(_a, ["children", "style", "value", "as", "onDrag"]);
+    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, _c = _a.layout, layout = _c === void 0 ? true : _c, props = __rest(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
     var Component = useConstant(function () { return motion(as); });
     var context = useContext(ReorderContext);
     var point = {
@@ -25,19 +25,19 @@ function ReorderItem(_a, externalRef) {
         var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
         return latestX || latestY ? 1 : "unset";
     });
-    var layout = useRef(null);
+    var measuredLayout = useRef(null);
     invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
-    var _c = context, axis = _c.axis, registerItem = _c.registerItem, updateOrder = _c.updateOrder;
+    var _d = context, axis = _d.axis, registerItem = _d.registerItem, updateOrder = _d.updateOrder;
     useEffect(function () {
-        registerItem(value, layout.current);
+        registerItem(value, measuredLayout.current);
     }, [context]);
-    return (React.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (event, gesturePoint) {
+    return (React.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: layout, onDrag: function (event, gesturePoint) {
             var velocity = gesturePoint.velocity;
             velocity[axis] &&
                 updateOrder(value, point[axis].get(), velocity[axis]);
             onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, gesturePoint);
         }, onLayoutMeasure: function (measured) {
-            layout.current = measured;
+            measuredLayout.current = measured;
         }, ref: externalRef }), children));
 }
 var Item = forwardRef(ReorderItem);

package/dist/es/motion/utils/valid-prop.mjs

@@ -18,6 +18,7 @@ var validMotionProps = new Set([
     "layout",
     "layoutId",
     "layoutDependency",
+    "onLayoutAnimationStart",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
     "onBeforeLayoutMeasure",

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

@@ -218,7 +218,7 @@ function createProjectionNode(_a) {
                     }
                     // TODO: Check here if an animation exists
                     var layoutTransition = (_c = (_b = _this.options.transition) !== null && _b !== void 0 ? _b : visualElement.getDefaultTransition()) !== null && _c !== void 0 ? _c : defaultLayoutTransition;
-                    var onLayoutAnimationComplete = visualElement.getProps().onLayoutAnimationComplete;
+                    var _g = visualElement.getProps(), onLayoutAnimationStart = _g.onLayoutAnimationStart, onLayoutAnimationComplete = _g.onLayoutAnimationComplete;
                     /**
                      * The target layout of the element might stay the same,
                      * but its position relative to its parent has changed.
@@ -241,7 +241,7 @@ function createProjectionNode(_a) {
                             _this.resumingFrom.resumingFrom = undefined;
                         }
                         _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                        var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete });
+                        var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
                         if (visualElement.shouldReduceMotion) {
                             animationOptions.delay = 0;
                             animationOptions.type = false;
@@ -774,6 +774,7 @@ function createProjectionNode(_a) {
         ProjectionNode.prototype.startAnimation = function (options) {
             var _this = this;
             var _a, _b;
+            this.notifyListeners("animationStart");
             (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
             if (this.resumingFrom) {
                 (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop();

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

@@ -11,6 +11,7 @@ var names = [
     "AnimationComplete",
     "LayoutAnimationComplete",
     "AnimationStart",
+    "LayoutAnimationStart",
     "SetAxisTarget",
     "Unmount",
 ];

package/dist/es/utils/is-browser.mjs

@@ -1,3 +1,3 @@
-var isBrowser = typeof window !== "undefined";
+var isBrowser = typeof document !== "undefined";
 
 export { isBrowser };

package/dist/es/utils/use-cycle.mjs

@@ -1,6 +1,6 @@
-import { __read } from 'tslib';
-import { useRef, useState } from 'react';
+import { __read, __spreadArray } from 'tslib';
 import { wrap } from 'popmotion';
+import { useRef, useState, useCallback } from 'react';
 
 /**
  * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
@@ -35,16 +35,14 @@ function useCycle() {
     }
     var index = useRef(0);
     var _a = __read(useState(items[index.current]), 2), item = _a[0], setItem = _a[1];
-    return [
-        item,
-        function (next) {
-            index.current =
-                typeof next !== "number"
-                    ? wrap(0, items.length, index.current + 1)
-                    : next;
-            setItem(items[index.current]);
-        },
-    ];
+    var runCycle = useCallback(function (next) {
+        index.current =
+            typeof next !== "number"
+                ? wrap(0, items.length, index.current + 1)
+                : next;
+        setItem(items[index.current]);
+    }, __spreadArray([items.length], __read(items), false));
+    return [item, runCycle];
 }
 
 export { useCycle };

package/dist/es/utils/use-reduced-motion.mjs

@@ -1,13 +1,14 @@
 import { __read } from 'tslib';
 import { useState, useContext } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
+import { isBrowser } from './is-browser.mjs';
 
 // Does this device prefer reduced motion? Returns `null` server-side.
 var prefersReducedMotion = { current: null };
 var hasDetected = false;
 function initPrefersReducedMotion() {
     hasDetected = true;
-    if (typeof window === "undefined")
+    if (!isBrowser)
         return;
     if (window.matchMedia) {
         var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");

package/dist/es/value/scroll/use-viewport-scroll.mjs

@@ -14,8 +14,6 @@ function getViewportScrollOffsets() {
 var hasListeners = false;
 function addEventListeners() {
     hasListeners = true;
-    if (typeof window === "undefined")
-        return;
     var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
     addDomEvent(window, "scroll", updateScrollValues, { passive: true });
     addDomEvent(window, "resize", updateScrollValues);

package/dist/framer-motion.dev.js

@@ -234,7 +234,7 @@
      */
     var PresenceContext = React.createContext(null);
 
-    var isBrowser = typeof window !== "undefined";
+    var isBrowser = typeof document !== "undefined";
 
     var useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
@@ -243,7 +243,7 @@
     var hasDetected = false;
     function initPrefersReducedMotion() {
         hasDetected = true;
-        if (typeof window === "undefined")
+        if (!isBrowser)
             return;
         if (window.matchMedia) {
             var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
@@ -3223,7 +3223,7 @@
                         }
                         // TODO: Check here if an animation exists
                         var layoutTransition = (_c = (_b = _this.options.transition) !== null && _b !== void 0 ? _b : visualElement.getDefaultTransition()) !== null && _c !== void 0 ? _c : defaultLayoutTransition;
-                        var onLayoutAnimationComplete = visualElement.getProps().onLayoutAnimationComplete;
+                        var _g = visualElement.getProps(), onLayoutAnimationStart = _g.onLayoutAnimationStart, onLayoutAnimationComplete = _g.onLayoutAnimationComplete;
                         /**
                          * The target layout of the element might stay the same,
                          * but its position relative to its parent has changed.
@@ -3246,7 +3246,7 @@
                                 _this.resumingFrom.resumingFrom = undefined;
                             }
                             _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                            var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete });
+                            var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
                             if (visualElement.shouldReduceMotion) {
                                 animationOptions.delay = 0;
                                 animationOptions.type = false;
@@ -3779,6 +3779,7 @@
             ProjectionNode.prototype.startAnimation = function (options) {
                 var _this = this;
                 var _a, _b;
+                this.notifyListeners("animationStart");
                 (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
                 if (this.resumingFrom) {
                     (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop();
@@ -4683,6 +4684,7 @@
         "layout",
         "layoutId",
         "layoutDependency",
+        "onLayoutAnimationStart",
         "onLayoutAnimationComplete",
         "onLayoutMeasure",
         "onBeforeLayoutMeasure",
@@ -7132,6 +7134,7 @@
         "AnimationComplete",
         "LayoutAnimationComplete",
         "AnimationStart",
+        "LayoutAnimationStart",
         "SetAxisTarget",
         "Unmount",
     ];
@@ -8636,6 +8639,9 @@
     var id = 0;
     var AnimateSharedLayout = function (_a) {
         var children = _a.children;
+        React__namespace.useEffect(function () {
+            warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+        }, []);
         return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
     };
 
@@ -8922,7 +8928,7 @@
         return isMotionValue(value) ? value : useMotionValue(defaultValue);
     }
     function ReorderItem(_a, externalRef) {
-        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, props = __rest(_a, ["children", "style", "value", "as", "onDrag"]);
+        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, _c = _a.layout, layout = _c === void 0 ? true : _c, props = __rest(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
         var Component = useConstant(function () { return motion(as); });
         var context = React.useContext(ReorderContext);
         var point = {
@@ -8933,19 +8939,19 @@
             var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
             return latestX || latestY ? 1 : "unset";
         });
-        var layout = React.useRef(null);
+        var measuredLayout = React.useRef(null);
         invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
-        var _c = context, axis = _c.axis, registerItem = _c.registerItem, updateOrder = _c.updateOrder;
+        var _d = context, axis = _d.axis, registerItem = _d.registerItem, updateOrder = _d.updateOrder;
         React.useEffect(function () {
-            registerItem(value, layout.current);
+            registerItem(value, measuredLayout.current);
         }, [context]);
-        return (React__namespace.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (event, gesturePoint) {
+        return (React__namespace.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: layout, onDrag: function (event, gesturePoint) {
                 var velocity = gesturePoint.velocity;
                 velocity[axis] &&
                     updateOrder(value, point[axis].get(), velocity[axis]);
                 onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, gesturePoint);
             }, onLayoutMeasure: function (measured) {
-                layout.current = measured;
+                measuredLayout.current = measured;
             }, ref: externalRef }), children));
     }
     var Item = React.forwardRef(ReorderItem);
@@ -9161,8 +9167,6 @@
     var hasListeners = false;
     function addEventListeners() {
         hasListeners = true;
-        if (typeof window === "undefined")
-            return;
         var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
         addDomEvent(window, "scroll", updateScrollValues, { passive: true });
         addDomEvent(window, "resize", updateScrollValues);
@@ -9365,16 +9369,14 @@
         }
         var index = React.useRef(0);
         var _a = __read(React.useState(items[index.current]), 2), item = _a[0], setItem = _a[1];
-        return [
-            item,
-            function (next) {
-                index.current =
-                    typeof next !== "number"
-                        ? wrap(0, items.length, index.current + 1)
-                        : next;
-                setItem(items[index.current]);
-            },
-        ];
+        var runCycle = React.useCallback(function (next) {
+            index.current =
+                typeof next !== "number"
+                    ? wrap(0, items.length, index.current + 1)
+                    : next;
+            setItem(items[index.current]);
+        }, __spreadArray([items.length], __read(items), false));
+        return [item, runCycle];
     }
 
     /**