framer-motion 5.0.0 → 5.1.0-rc.1

package/README.md

@@ -35,21 +35,22 @@ It looks like this:
 
 It does all this:
 
--   Spring animations
--   Simple keyframes syntax
+-   Springs
+-   Keyframes
+-   Layout animations
+-   Shared layout animations
 -   Gestures (drag/tap/hover)
--   Layout and shared layout animations
 -   SVG paths
 -   Exit animations
 -   Server-side rendering
--   Variants for orchestrating animations across components
+-   Orchestrate animations across components
 -   CSS variables
 
 ...and a whole lot more.
 
 ## Get started
 
-### Quick start
+### 🐇 Quick start
 
 ```
 npm install framer-motion
@@ -63,17 +64,17 @@ export const MyComponent = ({ isVisible }) => (
 )
 ```
 
-### Docs
+### 📚 Docs
 
 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.
+Or checkout [our examples](https://www.framer.com/docs/examples/) for inspiration.
 
-### Contribute
+### 🛠 Contribute
 
 Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
 
-### License
+### 👩🏻‍⚖️ License
 
 Framer Motion is MIT licensed.
 

package/dist/es/animation/utils/transitions.mjs

@@ -75,9 +75,9 @@ function convertTransitionToAnimationOptions(_a) {
  * Get the delay for a value by checking Transition with decreasing specificity.
  */
 function getDelayFromTransition(transition, key) {
-    var _a;
+    var _a, _b;
     var valueTransition = getValueTransition(transition, key) || {};
-    return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;
+    return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;
 }
 function hydrateKeyframes(options) {
     if (Array.isArray(options.to) && options.to[0] === null) {

package/dist/es/components/AnimatePresence/index.mjs

@@ -1,6 +1,6 @@
 import { __read, __spreadArray } from 'tslib';
 import * as React from 'react';
-import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
+import { useContext, useRef, useEffect, cloneElement, Children, isValidElement } from 'react';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
@@ -72,6 +72,10 @@ var AnimatePresence = function (_a) {
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
     var isInitialRender = useRef(true);
+    var isMounted = useRef(true);
+    useEffect(function () { return function () {
+        isMounted.current = false;
+    }; }, []);
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     var filteredChildren = onlyElements(children);
     // Keep a living record of the children we're actually rendering so we
@@ -130,6 +134,9 @@ var AnimatePresence = function (_a) {
             // Defer re-rendering until all exiting children have indeed left
             if (!exiting.size) {
                 presentChildren.current = filteredChildren;
+                if (isMounted.current === false) {
+                    return;
+                }
                 forceRender();
                 onExitComplete && onExitComplete();
             }

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

@@ -2,18 +2,9 @@ import { useMemo, useContext } from 'react';
 import { MotionContext } from './index.mjs';
 import { getCurrentTreeVariants } from './utils.mjs';
 
-function useCreateMotionContext(props, isStatic) {
+function useCreateMotionContext(props) {
     var _a = getCurrentTreeVariants(props, useContext(MotionContext)), initial = _a.initial, animate = _a.animate;
-    return useMemo(function () { return ({ initial: initial, animate: animate }); }, 
-    /**
-     * Only break memoisation in static mode
-     */
-    isStatic
-        ? [
-            variantLabelsAsDependency(initial),
-            variantLabelsAsDependency(animate),
-        ]
-        : []);
+    return useMemo(function () { return ({ initial: initial, animate: animate }); }, [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
 }
 function variantLabelsAsDependency(prop) {
     return Array.isArray(prop) ? prop.join(" ") : prop;

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

@@ -14,6 +14,8 @@ import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
 import { addDomEvent } from '../../events/use-dom-event.mjs';
 import { mix } from 'popmotion';
+import { percent } from 'style-value-types';
+import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 
 var elementDragControls = new WeakMap();
 /**
@@ -79,7 +81,19 @@ var VisualElementDragControls = /** @class */ (function () {
              * Record gesture origin
              */
             eachAxis(function (axis) {
-                _this.originPoint[axis] = _this.getAxisMotionValue(axis).get();
+                var _a, _b;
+                var current = _this.getAxisMotionValue(axis).get() || 0;
+                /**
+                 * If the MotionValue is a percentage value convert to px
+                 */
+                if (percent.test(current)) {
+                    var measuredAxis = (_b = (_a = _this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                    if (measuredAxis) {
+                        var length_1 = calcLength(measuredAxis);
+                        current = length_1 * (parseFloat(current) / 100);
+                    }
+                }
+                _this.originPoint[axis] = current;
             });
             // Fire onDragStart event
             onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, info);

package/dist/es/motion/index.mjs

@@ -39,11 +39,7 @@ function createMotionComponent(_a) {
          */
         var config = useContext(MotionConfigContext);
         var features = null;
-        /**
-         * Create the tree context. This is memoized and will only trigger renders
-         * when the current tree variant changes in static mode.
-         */
-        var context = useCreateMotionContext(props, config.isStatic);
+        var context = useCreateMotionContext(props);
         /**
          * Create a unique projection ID for this component. If a new component is added
          * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing

package/dist/es/motion/utils/use-visual-element.mjs

@@ -29,10 +29,6 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     });
     useEffect(function () {
         var _a;
-        /**
-         * In a future refactor we can replace the features-as-components and
-         * have this loop through them all firing "effect" listeners
-         */
         (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();
     });
     useIsomorphicLayoutEffect(function () { return function () { return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(); }; }, []);

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -40,24 +40,26 @@ var BoundingBoxDimension;
 var getPosFromMatrix = function (matrix, pos) {
     return parseFloat(matrix.split(", ")[pos]);
 };
-var getTranslateFromMatrix = function (pos2, pos3) { return function (_bbox, _a) {
-    var transform = _a.transform;
-    if (transform === "none" || !transform)
-        return 0;
-    var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
-    if (matrix3d) {
-        return getPosFromMatrix(matrix3d[1], pos3);
-    }
-    else {
-        var matrix = transform.match(/^matrix\((.+)\)$/);
-        if (matrix) {
-            return getPosFromMatrix(matrix[1], pos2);
+var getTranslateFromMatrix = function (pos2, pos3) {
+    return function (_bbox, _a) {
+        var transform = _a.transform;
+        if (transform === "none" || !transform)
+            return 0;
+        var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+        if (matrix3d) {
+            return getPosFromMatrix(matrix3d[1], pos3);
         }
         else {
-            return 0;
+            var matrix = transform.match(/^matrix\((.+)\)$/);
+            if (matrix) {
+                return getPosFromMatrix(matrix[1], pos2);
+            }
+            else {
+                return 0;
+            }
         }
-    }
-}; };
+    };
+};
 var transformKeys = new Set(["x", "y", "z"]);
 var nonTranslationalTransformKeys = transformProps.filter(function (key) { return !transformKeys.has(key); });
 function removeNonTranslationalTransform(visualElement) {
@@ -76,13 +78,15 @@ function removeNonTranslationalTransform(visualElement) {
 }
 var positionalValues = {
     // Dimensions
-    width: function (_a) {
+    width: function (_a, _b) {
         var x = _a.x;
-        return x.max - x.min;
+        var _c = _b.paddingLeft, paddingLeft = _c === void 0 ? "0" : _c, _d = _b.paddingRight, paddingRight = _d === void 0 ? "0" : _d;
+        return x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight);
     },
-    height: function (_a) {
+    height: function (_a, _b) {
         var y = _a.y;
-        return y.max - y.min;
+        var _c = _b.paddingTop, paddingTop = _c === void 0 ? "0" : _c, _d = _b.paddingBottom, paddingBottom = _d === void 0 ? "0" : _d;
+        return y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom);
     },
     top: function (_bbox, _a) {
         var top = _a.top;
@@ -110,8 +114,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var originBbox = visualElement.measureViewportBox();
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
-    var display = elementComputedStyle.display, top = elementComputedStyle.top, left = elementComputedStyle.left, bottom = elementComputedStyle.bottom, right = elementComputedStyle.right, transform = elementComputedStyle.transform;
-    var originComputedStyle = { top: top, left: left, bottom: bottom, right: right, transform: transform };
+    var display = elementComputedStyle.display;
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
@@ -124,7 +127,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         var value = visualElement.getValue(key);
-        setAndResetVelocity(value, positionalValues[key](originBbox, originComputedStyle));
+        setAndResetVelocity(value, positionalValues[key](originBbox, elementComputedStyle));
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;
@@ -145,8 +148,8 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         if (!visualElement.hasValue(key))
             return;
         var from = origin[key];
-        var to = target[key];
         var fromType = findDimensionValueType(from);
+        var to = target[key];
         var toType;
         // TODO: The current implementation of this basically throws an error
         // if you try and do value conversion via keyframes. There's probably
@@ -154,7 +157,10 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         // as it'd be doing multiple resize-remeasure operations.
         if (isKeyframesTarget(to)) {
             var numKeyframes = to.length;
-            for (var i = to[0] === null ? 1 : 0; i < numKeyframes; i++) {
+            var fromIndex = to[0] === null ? 1 : 0;
+            from = to[fromIndex];
+            fromType = findDimensionValueType(from);
+            for (var i = fromIndex; i < numKeyframes; i++) {
                 if (!toType) {
                     toType = findDimensionValueType(to[i]);
                     invariant(toType === fromType ||
@@ -199,7 +205,8 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
                 // If we're going to do value conversion via DOM measurements, we first
                 // need to remove non-positional transform values that could affect the bbox measurements.
                 if (!hasAttemptedToRemoveTransformValues) {
-                    removedTransformValues = removeNonTranslationalTransform(visualElement);
+                    removedTransformValues =
+                        removeNonTranslationalTransform(visualElement);
                     hasAttemptedToRemoveTransformValues = true;
                 }
                 changedValueTypeKeys.push(key);
@@ -241,4 +248,4 @@ function unitConversion(visualElement, target, origin, transitionEnd) {
         : { target: target, transitionEnd: transitionEnd };
 }
 
-export { BoundingBoxDimension, unitConversion };
+export { BoundingBoxDimension, positionalValues, unitConversion };

package/dist/es/render/svg/config-motion.mjs

@@ -26,17 +26,11 @@ var svgMotionConfig = {
                     height: 0,
                 };
             }
-            if (isPath(instance)) {
-                renderState.totalPathLength = instance.getTotalLength();
-            }
             buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);
             // TODO: Replace with direct assignment
             renderSVG(instance, renderState);
         },
     }),
 };
-function isPath(element) {
-    return element.tagName === "path";
-}
 
 export { svgMotionConfig };

package/dist/es/render/svg/utils/build-attrs.mjs

@@ -13,7 +13,7 @@ function buildSVGAttrs(state, _a, options, transformTemplate) {
     buildHTMLStyles(state, latest, options, transformTemplate);
     state.attrs = state.style;
     state.style = {};
-    var attrs = state.attrs, style = state.style, dimensions = state.dimensions, totalPathLength = state.totalPathLength;
+    var attrs = state.attrs, style = state.style, dimensions = state.dimensions;
     /**
      * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
      * and copy it into style.
@@ -33,9 +33,9 @@ function buildSVGAttrs(state, _a, options, transformTemplate) {
         attrs.x = attrX;
     if (attrY !== undefined)
         attrs.y = attrY;
-    // Build SVG path if one has been measured
-    if (totalPathLength !== undefined && pathLength !== undefined) {
-        buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset, false);
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
     }
 }
 

package/dist/es/render/svg/utils/camel-case-attrs.mjs

@@ -21,6 +21,7 @@ var camelCaseAttributes = new Set([
     "tableValues",
     "viewBox",
     "gradientTransform",
+    "pathLength",
 ]);
 
 export { camelCaseAttributes };

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

@@ -1,9 +1,5 @@
 import { px } from 'style-value-types';
 
-// Convert a progress 0-1 to a pixels value based on the provided length
-var progressToPixels = function (progress, length) {
-    return px.transform(progress * length);
-};
 var dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -19,18 +15,20 @@ var camelKeys = {
  *
  * This function is mutative to reduce per-frame GC.
  */
-function buildSVGPath(attrs, totalLength, length, spacing, offset, useDashCase) {
+function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
     if (spacing === void 0) { spacing = 1; }
     if (offset === void 0) { offset = 0; }
     if (useDashCase === void 0) { useDashCase = true; }
+    // Normalise path length by setting SVG attribute pathLength to 1
+    attrs.pathLength = 1;
     // We use dash case when setting attributes directly to the DOM node and camel case
     // when defining props on a React component.
     var keys = useDashCase ? dashKeys : camelKeys;
     // Build the dash offset
-    attrs[keys.offset] = progressToPixels(-offset, totalLength);
+    attrs[keys.offset] = px.transform(-offset);
     // Build the dash array
-    var pathLength = progressToPixels(length, totalLength);
-    var pathSpacing = progressToPixels(spacing, totalLength);
+    var pathLength = px.transform(length);
+    var pathSpacing = px.transform(spacing);
     attrs[keys.array] = pathLength + " " + pathSpacing;
 }
 

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

@@ -8,7 +8,7 @@ import { resolveVariant } from './variants.mjs';
  */
 function animateVisualElement(visualElement, definition, options) {
     if (options === void 0) { options = {}; }
-    visualElement.notifyAnimationStart();
+    visualElement.notifyAnimationStart(definition);
     var animation;
     if (Array.isArray(definition)) {
         var animations = definition.map(function (variant) {

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

@@ -30,12 +30,28 @@ function resolveVariantFromProps(props, definition, custom, currentValues, curre
     var _a;
     if (currentValues === void 0) { currentValues = {}; }
     if (currentVelocity === void 0) { currentVelocity = {}; }
+    /**
+     * If the variant definition is a function, resolve.
+     */
+    if (typeof definition === "function") {
+        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    }
+    /**
+     * If the variant definition is a variant label, or
+     * the function returned a variant label, resolve.
+     */
     if (typeof definition === "string") {
         definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];
     }
-    return typeof definition === "function"
-        ? definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)
-        : definition;
+    /**
+     * At this point we've resolved both functions and variant labels,
+     * but the resolved variant label might itself have been a function.
+     * If so, resolve. This can only have returned a valid target object.
+     */
+    if (typeof definition === "function") {
+        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    }
+    return definition;
 }
 function resolveVariant(visualElement, definition, custom) {
     var props = visualElement.getProps();