framer-motion 5.0.1 → 5.2.0

package/dist/framer-motion.dev.js

@@ -331,12 +331,28 @@
         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();
@@ -913,6 +929,46 @@
             return functions ? functions.map(applyDefaultFilter).join(' ') : v;
         } });
 
+    function hueToRgb(p, q, t) {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    }
+    function hslaToRgba({ hue, saturation, lightness, alpha }) {
+        hue /= 360;
+        saturation /= 100;
+        lightness /= 100;
+        let red = 0;
+        let green = 0;
+        let blue = 0;
+        if (!saturation) {
+            red = green = blue = lightness;
+        }
+        else {
+            const q = lightness < 0.5
+                ? lightness * (1 + saturation)
+                : lightness + saturation - lightness * saturation;
+            const p = 2 * lightness - q;
+            red = hueToRgb(p, q, hue + 1 / 3);
+            green = hueToRgb(p, q, hue);
+            blue = hueToRgb(p, q, hue - 1 / 3);
+        }
+        return {
+            red: Math.round(red * 255),
+            green: Math.round(green * 255),
+            blue: Math.round(blue * 255),
+            alpha,
+        };
+    }
+
     const mixLinearColor = (from, to, v) => {
         const fromExpo = from * from;
         const toExpo = to * to;
@@ -922,24 +978,25 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     const notAnimatable = (color) => `'${color}' is not an animatable color. Use the equivalent color code instead.`;
     const mixColor = (from, to) => {
-        const fromColorType = getColorType(from);
-        const toColorType = getColorType(to);
+        let fromColorType = getColorType(from);
+        let toColorType = getColorType(to);
         invariant(!!fromColorType, notAnimatable(from));
         invariant(!!toColorType, notAnimatable(to));
-        invariant(fromColorType.transform === toColorType.transform, "Both colors must be hex/RGBA, OR both must be HSLA.");
-        if (!fromColorType ||
-            !toColorType ||
-            fromColorType.transform !== toColorType.transform) {
-            return (p) => `${p > 0 ? to : from}`;
-        }
-        const fromColor = fromColorType.parse(from);
-        const toColor = toColorType.parse(to);
+        let fromColor = fromColorType.parse(from);
+        let toColor = toColorType.parse(to);
+        if (fromColorType === hsla) {
+            fromColor = hslaToRgba(fromColor);
+            fromColorType = rgba;
+        }
+        if (toColorType === hsla) {
+            toColor = hslaToRgba(toColor);
+            toColorType = rgba;
+        }
         const blended = Object.assign({}, fromColor);
-        const mixFunc = fromColorType === hsla ? mix : mixLinearColor;
         return (v) => {
             for (const key in blended) {
                 if (key !== "alpha") {
-                    blended[key] = mixFunc(fromColor[key], toColor[key], v);
+                    blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
                 }
             }
             blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
@@ -4522,6 +4579,7 @@
         "dragListener",
         "dragConstraints",
         "dragDirectionLock",
+        "dragSnapToOrigin",
         "_dragX",
         "_dragY",
         "dragElastic",
@@ -4611,10 +4669,6 @@
         return pxOriginX + " " + pxOriginY;
     }
 
-    // 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",
@@ -4630,18 +4684,20 @@
      *
      * 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;
     }
 
@@ -4655,7 +4711,7 @@
         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.
@@ -4675,9 +4731,9 @@
             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);
         }
     }
 
@@ -4756,6 +4812,7 @@
         "tableValues",
         "viewBox",
         "gradientTransform",
+        "pathLength",
     ]);
 
     function renderSVG(element, renderState) {
@@ -4867,18 +4924,12 @@
                         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";
-    }
 
     var htmlMotionConfig = {
         useVisualState: makeUseVisualState({
@@ -5587,10 +5638,10 @@
 
     var variantPriorityOrder = [
         AnimationType.Animate,
+        AnimationType.Focus,
         AnimationType.Hover,
         AnimationType.Tap,
         AnimationType.Drag,
-        AnimationType.Focus,
         AnimationType.Exit,
     ];
     var reversePriorityOrder = __spreadArray([], __read(variantPriorityOrder), false).reverse();
@@ -6319,7 +6370,19 @@
                  * 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);
@@ -7363,13 +7426,15 @@
     }
     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;
@@ -7397,8 +7462,7 @@
         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") {
@@ -7411,7 +7475,7 @@
             // 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;