framer-motion 5.0.0-rc.1 → 5.0.0

package/README.md

@@ -1,7 +1,7 @@
 <p align="center">
-  <img src="https://misc.framerstatic.com/motion/motion-readme-4.gif" width="400" height="250" alt="Framer Motion" />
+  <img src="https://user-images.githubusercontent.com/22095598/123793419-f5528800-d8e1-11eb-8c5f-e2dad45a9c81.png" width="108" height="108" alt="Framer Motion" />
 </p>
-
+<h1 align="center">Framer Motion</h1>
 <h3 align="center">
   An open source and production-ready motion<br>library for React on the web.
 </h3>
@@ -65,7 +65,7 @@ export const MyComponent = ({ isVisible }) => (
 
 ### Docs
 
-Check out [our documentation](https://framer.com/api/motion) for guides and a full API reference.
+Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
 
 Or checkout [our examples](https://framer.com/motion) for inspiration.
 

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

@@ -1,4 +1,5 @@
 import { __rest, __assign } from 'tslib';
+import { invariant } from 'hey-listen';
 import * as React from 'react';
 import { forwardRef, useRef, useEffect } from 'react';
 import { ReorderContext } from '../../context/ReorderContext.mjs';
@@ -7,10 +8,11 @@ import { useConstant } from '../../utils/use-constant.mjs';
 import { checkReorder } from './utils/check-reorder.mjs';
 
 function ReorderGroup(_a, externalRef) {
-    var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, props = __rest(_a, ["children", "as", "axis", "onReorder"]);
+    var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, values = _a.values, props = __rest(_a, ["children", "as", "axis", "onReorder", "values"]);
     var Component = useConstant(function () { return motion(as); });
     var order = [];
     var isReordering = useRef(false);
+    invariant(Boolean(values), "Reorder.Group must be provided a values prop");
     var context = {
         axis: axis,
         registerItem: function (value, layout) {
@@ -20,6 +22,7 @@ function ReorderGroup(_a, externalRef) {
             if (layout &&
                 order.findIndex(function (entry) { return value === entry.value; }) === -1) {
                 order.push({ value: value, layout: layout[axis] });
+                order.sort(compareMin);
             }
         },
         updateOrder: function (id, offset, velocity) {
@@ -28,7 +31,9 @@ function ReorderGroup(_a, externalRef) {
             var newOrder = checkReorder(order, id, offset, velocity);
             if (order !== newOrder) {
                 isReordering.current = true;
-                onReorder(newOrder.map(getValue));
+                onReorder(newOrder
+                    .map(getValue)
+                    .filter(function (value) { return values.indexOf(value) !== -1; }));
             }
         },
     };
@@ -42,5 +47,8 @@ var Group = forwardRef(ReorderGroup);
 function getValue(item) {
     return item.value;
 }
+function compareMin(a, b) {
+    return a.layout.min - b.layout.min;
+}
 
 export { Group, ReorderGroup };

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

@@ -35,7 +35,9 @@ function ReorderItem(_a, externalRef) {
             var velocity = _a.velocity;
             velocity[axis] &&
                 updateOrder(value, point[axis].get(), velocity[axis]);
-        }, onLayoutMeasure: function (measured) { return (layout.current = measured); }, ref: externalRef }), children));
+        }, onLayoutMeasure: function (measured) {
+            layout.current = measured;
+        }, ref: externalRef }), children));
 }
 var Item = forwardRef(ReorderItem);
 

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -43,6 +43,11 @@ var VisualElementDragControls = /** @class */ (function () {
     VisualElementDragControls.prototype.start = function (originEvent, _a) {
         var _this = this;
         var _b = _a === void 0 ? {} : _a, _c = _b.snapToCursor, snapToCursor = _c === void 0 ? false : _c;
+        /**
+         * Don't start dragging if this component is exiting
+         */
+        if (this.visualElement.isPresent === false)
+            return;
         var onSessionStart = function (event) {
             // Stop any animations on both axis values immediately. This allows the user to throw and catch
             // the component.
@@ -67,6 +72,7 @@ var VisualElementDragControls = /** @class */ (function () {
             _this.currentDirection = null;
             _this.resolveConstraints();
             if (_this.visualElement.projection) {
+                _this.visualElement.projection.isAnimationBlocked = true;
                 _this.visualElement.projection.target = undefined;
             }
             /**
@@ -134,6 +140,9 @@ var VisualElementDragControls = /** @class */ (function () {
     VisualElementDragControls.prototype.cancel = function () {
         var _a, _b;
         this.isDragging = false;
+        if (this.visualElement.projection) {
+            this.visualElement.projection.isAnimationBlocked = false;
+        }
         (_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();
         this.panSession = undefined;
         var dragPropagation = this.getProps().dragPropagation;

package/dist/es/motion/features/animations.mjs

@@ -25,12 +25,13 @@ var animations = {
     }),
     exit: makeRenderlessComponent(function (props) {
         var custom = props.custom, visualElement = props.visualElement;
-        var _a = __read(usePresence(), 2), isPresent = _a[0], onExitComplete = _a[1];
+        var _a = __read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
         var presenceContext = useContext(PresenceContext);
         useEffect(function () {
             var _a, _b;
+            visualElement.isPresent = isPresent;
             var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });
-            !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(onExitComplete));
+            !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(safeToRemove));
         }, [isPresent]);
     }),
 };

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -1,4 +1,5 @@
 import { __extends, __assign, __read } from 'tslib';
+import sync from 'framesync';
 import React__default, { useContext } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';
@@ -38,6 +39,7 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
         globalProjectionState.hasEverUpdated = true;
     };
     MeasureLayoutWithContext.prototype.getSnapshotBeforeUpdate = function (prevProps) {
+        var _this = this;
         var _a = this.props, layoutDependency = _a.layoutDependency, visualElement = _a.visualElement, drag = _a.drag, isPresent = _a.isPresent;
         var projection = visualElement.projection;
         if (!projection)
@@ -55,12 +57,25 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
             layoutDependency === undefined) {
             projection.willUpdate();
         }
+        else {
+            this.safeToRemove();
+        }
         if (prevProps.isPresent !== isPresent) {
             if (isPresent) {
                 projection.promote();
             }
-            else {
-                projection.relegate();
+            else if (!projection.relegate()) {
+                /**
+                 * If there's another stack member taking over from this one,
+                 * it's in charge of the exit animation and therefore should
+                 * be in charge of the safe to remove. Otherwise we call it here.
+                 */
+                sync.postRender(function () {
+                    var _a;
+                    if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
+                        _this.safeToRemove();
+                    }
+                });
             }
         }
         return null;
@@ -86,8 +101,8 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
         }
     };
     MeasureLayoutWithContext.prototype.safeToRemove = function () {
-        var _a, _b;
-        (_b = (_a = this.props).safeToRemove) === null || _b === void 0 ? void 0 : _b.call(_a);
+        var safeToRemove = this.props.safeToRemove;
+        safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove();
     };
     MeasureLayoutWithContext.prototype.render = function () {
         return null;

package/dist/es/motion/utils/VisualElementHandler.mjs

@@ -6,9 +6,9 @@ var VisualElementHandler = /** @class */ (function (_super) {
     function VisualElementHandler() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    VisualElementHandler.prototype.componentDidMount = function () {
-        this.updateProps();
-    };
+    /**
+     * Update visual element props as soon as we know this update is going to be commited.
+     */
     VisualElementHandler.prototype.getSnapshotBeforeUpdate = function () {
         this.updateProps();
         return null;

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

@@ -18,7 +18,7 @@ import { eachAxis } from '../utils/each-axis.mjs';
 import { hasTransform, hasScale } from '../utils/has-transform.mjs';
 import { transformAxes } from '../../render/html/utils/transform.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
-import { elementDragControls } from '../../gestures/drag/VisualElementDragControls.mjs';
+import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 
 /**
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
@@ -67,6 +67,7 @@ function createProjectionNode(_a) {
              * until all their parents stop performing layout animations.
              */
             this.isTreeAnimating = false;
+            this.isAnimationBlocked = false;
             /**
              * Flag to true if we think this layout has been changed. We can't always know this,
              * currently we set it to true every time a component renders, or if it has a layoutDependency
@@ -211,11 +212,13 @@ function createProjectionNode(_a) {
                 visualElement &&
                 (layoutId || layout)) {
                 this.addEventListener("didUpdate", function (_a) {
-                    var _b, _c, _d;
+                    var _b, _c, _d, _e, _f;
                     var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged, hasRelativeTargetChanged = _a.hasRelativeTargetChanged, newLayout = _a.layout;
-                    var dragControls = elementDragControls.get(visualElement);
-                    if (dragControls === null || dragControls === void 0 ? void 0 : dragControls.isDragging)
+                    if (_this.isTreeAnimationBlocked()) {
+                        _this.target = undefined;
+                        _this.relativeTarget = undefined;
                         return;
+                    }
                     // 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;
@@ -243,6 +246,9 @@ function createProjectionNode(_a) {
                         _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                         _this.startAnimation(__assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete }));
                     }
+                    else {
+                        _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
+                    }
                     _this.targetLayout = newLayout;
                 });
             }
@@ -266,6 +272,12 @@ function createProjectionNode(_a) {
         ProjectionNode.prototype.isUpdateBlocked = function () {
             return this.updateManuallyBlocked || this.updateBlockedByResize;
         };
+        ProjectionNode.prototype.isTreeAnimationBlocked = function () {
+            var _a;
+            return (this.isAnimationBlocked ||
+                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimationBlocked()) ||
+                false);
+        };
         // Note: currently only running on root node
         ProjectionNode.prototype.startUpdate = function () {
             var _a;
@@ -275,10 +287,12 @@ function createProjectionNode(_a) {
             (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
         };
         ProjectionNode.prototype.willUpdate = function (shouldNotifyListeners) {
-            var _a;
+            var _a, _b, _c;
             if (shouldNotifyListeners === void 0) { shouldNotifyListeners = true; }
-            if (this.root.isUpdateBlocked())
+            if (this.root.isUpdateBlocked()) {
+                (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
                 return;
+            }
             !this.root.isUpdating && this.root.startUpdate();
             if (this.isLayoutDirty)
                 return;
@@ -292,10 +306,10 @@ function createProjectionNode(_a) {
                  */
                 node.updateScroll();
             }
-            var _b = this.options, layoutId = _b.layoutId, layout = _b.layout;
+            var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
             if (!layoutId && !layout)
                 return;
-            var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            var transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
             this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
             this.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
@@ -565,8 +579,8 @@ function createProjectionNode(_a) {
                 }
             }
             /**
-             * If we have no relative target or no target delta we can't perform projection
-             * so early return.
+             * If we have no relative target or no target delta our target isn't valid
+             * for this frame.
              */
             if (!this.relativeTarget && !this.targetDelta)
                 return;
@@ -782,11 +796,11 @@ function createProjectionNode(_a) {
                 this.resumingFrom.currentAnimation = undefined;
                 this.resumingFrom.preserveOpacity = undefined;
             }
+            (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.exitAnimationComplete();
             this.resumingFrom =
                 this.currentAnimation =
                     this.animationValues =
                         undefined;
-            (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.exitAnimationComplete();
         };
         ProjectionNode.prototype.finishAnimation = function () {
             var _a;
@@ -920,7 +934,8 @@ function createProjectionNode(_a) {
             if (this.needsReset) {
                 this.needsReset = false;
                 styles.opacity = "";
-                styles.pointerEvents = styleProp.pointerEvents || "";
+                styles.pointerEvents =
+                    resolveMotionValue(styleProp.pointerEvents) || "";
                 styles.transform = transformTemplate
                     ? transformTemplate(this.latestValues, "")
                     : "none";
@@ -931,7 +946,8 @@ function createProjectionNode(_a) {
                 var emptyStyles = {};
                 if (this.options.layoutId) {
                     emptyStyles.opacity = (_b = this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1;
-                    emptyStyles.pointerEvents = styleProp.pointerEvents || "";
+                    emptyStyles.pointerEvents =
+                        resolveMotionValue(styleProp.pointerEvents) || "";
                 }
                 if (this.hasProjected && !hasTransform(this.latestValues)) {
                     emptyStyles.transform = transformTemplate
@@ -947,7 +963,6 @@ function createProjectionNode(_a) {
             if (transformTemplate) {
                 styles.transform = transformTemplate(valuesToRender, styles.transform);
             }
-            // TODO Move into stand-alone, testable function
             var _g = this.projectionDelta, x = _g.x, y = _g.y;
             styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
             if (lead.animationValues) {
@@ -997,7 +1012,9 @@ function createProjectionNode(_a) {
              */
             if (this.options.layoutId) {
                 styles.pointerEvents =
-                    lead === this ? styleProp.pointerEvents || "" : "none";
+                    lead === this
+                        ? resolveMotionValue(styleProp.pointerEvents) || ""
+                        : "none";
             }
             return styles;
         };
@@ -1017,13 +1034,13 @@ function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     var snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
     if (node.isLead() &&
         node.layout &&
         snapshot &&
         node.hasListeners("didUpdate")) {
-        var _c = node.layout, layout_1 = _c.actual, measuredLayout = _c.measured;
+        var _e = node.layout, layout_1 = _e.actual, measuredLayout = _e.measured;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
         if (node.options.animationType === "size") {
@@ -1063,7 +1080,7 @@ function notifyLayoutUpdate(node) {
              * the relative snapshot is not relavent
              */
             if (node.relativeParent && !node.relativeParent.resumeFrom) {
-                var _d = node.relativeParent, parentSnapshot = _d.snapshot, parentLayout = _d.layout;
+                var _f = node.relativeParent, parentSnapshot = _f.snapshot, parentLayout = _f.layout;
                 if (parentSnapshot && parentLayout) {
                     var relativeSnapshot = createBox();
                     calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
@@ -1084,6 +1101,9 @@ function notifyLayoutUpdate(node) {
             hasRelativeTargetChanged: hasRelativeTargetChanged,
         });
     }
+    else if (node.isLead()) {
+        (_d = (_c = node.options).onExitComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
     /**
      * Clearing transition
      * TODO: Investigate why this transition is being passed in as {type: false } from Framer

package/dist/es/projection/shared/stack.mjs

@@ -86,7 +86,11 @@ var NodeStack = /** @class */ (function () {
         }
     };
     NodeStack.prototype.exitAnimationComplete = function () {
-        this.members.forEach(function (node) { var _a, _b; return (_b = (_a = node.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a); });
+        this.members.forEach(function (node) {
+            var _a, _b, _c, _d, _e;
+            (_b = (_a = node.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_e = (_c = node.resumingFrom) === null || _c === void 0 ? void 0 : (_d = _c.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d);
+        });
     };
     NodeStack.prototype.scheduleRender = function () {
         this.members.forEach(function (node) {

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

@@ -1,6 +1,6 @@
-function renderHTML(element, _a, projection) {
+function renderHTML(element, _a, styleProp, projection) {
     var style = _a.style, vars = _a.vars;
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(style));
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
     // Loop over any CSS variables and assign those.
     for (var key in vars) {
         element.style.setProperty(key, vars[key]);

package/dist/es/render/index.mjs

@@ -62,7 +62,7 @@ var visualElement = function (_a) {
             if (!instance || !isMounted)
                 return;
             triggerBuild();
-            renderInstance(instance, renderState, element.projection);
+            renderInstance(instance, renderState, props.style, element.projection);
         }
         function triggerBuild() {
             build(element, renderState, latestValues, options, props);
@@ -162,6 +162,7 @@ var visualElement = function (_a) {
                     removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
                 }
                 parent === null || parent === void 0 ? void 0 : parent.children.add(element);
+                element.setProps(props);
             }, 
             /**
              *

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

@@ -20,9 +20,13 @@ function createLifecycles() {
     var lifecycles = {
         clearAllListeners: function () { return managers.forEach(function (manager) { return manager.clear(); }); },
         updatePropListeners: function (props) {
-            return names.forEach(function (name) {
+            names.forEach(function (name) {
+                var _a;
                 var on = "on" + name;
                 var propListener = props[on];
+                // Unsubscribe existing subscription
+                (_a = propSubscriptions[name]) === null || _a === void 0 ? void 0 : _a.call(propSubscriptions);
+                // Add new subscription
                 if (propListener) {
                     propSubscriptions[name] = lifecycles[on](propListener);
                 }
@@ -36,7 +40,7 @@ function createLifecycles() {
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            return manager.notify.apply(manager, __spreadArray([], __read(args), false));
+            manager.notify.apply(manager, __spreadArray([], __read(args), false));
         };
     });
     return lifecycles;