framer-motion 6.2.10 → 6.3.0

package/dist/cjs/index.js

@@ -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",
 ];
@@ -7699,7 +7702,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 +7713,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);
@@ -8142,16 +8145,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/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/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/framer-motion.dev.js

@@ -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",
     ];
@@ -8922,7 +8925,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 +8936,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);
@@ -9365,16 +9368,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];
     }
 
     /**