framer-motion 5.0.2 → 5.2.1

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

@@ -34,6 +34,7 @@ var validMotionProps = new Set([
     "dragListener",
     "dragConstraints",
     "dragDirectionLock",
+    "dragSnapToOrigin",
     "_dragX",
     "_dragY",
     "dragElastic",

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

@@ -307,7 +307,7 @@ function createProjectionNode(_a) {
                 node.updateScroll();
             }
             var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
-            if (!layoutId && !layout)
+            if (layoutId === undefined && !layout)
                 return;
             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, "");

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

@@ -115,11 +115,18 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
     var display = elementComputedStyle.display;
+    var origin = {};
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
         visualElement.setStaticValue("display", target.display || "block");
     }
+    /**
+     * Record origins before we render and update styles
+     */
+    changedKeys.forEach(function (key) {
+        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+    });
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
     visualElement.syncRender();
     var targetBbox = visualElement.measureViewportBox();
@@ -127,7 +134,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, elementComputedStyle));
+        setAndResetVelocity(value, origin[key]);
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;

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-state.mjs

@@ -8,10 +8,10 @@ import { isVariantLabels, resolveVariant, isVariantLabel } from './variants.mjs'
 
 var variantPriorityOrder = [
     AnimationType.Animate,
+    AnimationType.Focus,
     AnimationType.Hover,
     AnimationType.Tap,
     AnimationType.Drag,
-    AnimationType.Focus,
     AnimationType.Exit,
 ];
 var reversePriorityOrder = __spreadArray([], __read(variantPriorityOrder), false).reverse();

package/dist/framer-motion.cjs.js

@@ -1988,7 +1988,7 @@ function createProjectionNode(_a) {
                 node.updateScroll();
             }
             var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
-            if (!layoutId && !layout)
+            if (layoutId === undefined && !layout)
                 return;
             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, "");
@@ -3348,6 +3348,7 @@ var validMotionProps = new Set([
     "dragListener",
     "dragConstraints",
     "dragDirectionLock",
+    "dragSnapToOrigin",
     "_dragX",
     "_dragY",
     "dragElastic",
@@ -3437,10 +3438,6 @@ function calcSVGTransformOrigin(dimensions, originX, originY) {
     return pxOriginX + " " + pxOriginY;
 }
 
-// Convert a progress 0-1 to a pixels value based on the provided length
-var progressToPixels = function (progress, length) {
-    return styleValueTypes.px.transform(progress * length);
-};
 var dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -3456,18 +3453,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] = styleValueTypes.px.transform(-offset);
     // Build the dash array
-    var pathLength = progressToPixels(length, totalLength);
-    var pathSpacing = progressToPixels(spacing, totalLength);
+    var pathLength = styleValueTypes.px.transform(length);
+    var pathSpacing = styleValueTypes.px.transform(spacing);
     attrs[keys.array] = pathLength + " " + pathSpacing;
 }
 
@@ -3481,7 +3480,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.
@@ -3501,9 +3500,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);
     }
 }
 
@@ -3582,6 +3581,7 @@ var camelCaseAttributes = new Set([
     "tableValues",
     "viewBox",
     "gradientTransform",
+    "pathLength",
 ]);
 
 function renderSVG(element, renderState) {
@@ -3693,18 +3693,12 @@ 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";
-}
 
 var htmlMotionConfig = {
     useVisualState: makeUseVisualState({
@@ -4413,10 +4407,10 @@ function shouldBlockAnimation(_a, key) {
 
 var variantPriorityOrder = [
     AnimationType.Animate,
+    AnimationType.Focus,
     AnimationType.Hover,
     AnimationType.Tap,
     AnimationType.Drag,
-    AnimationType.Focus,
     AnimationType.Exit,
 ];
 var reversePriorityOrder = tslib.__spreadArray([], tslib.__read(variantPriorityOrder), false).reverse();
@@ -6238,11 +6232,18 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
     var display = elementComputedStyle.display;
+    var origin = {};
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
         visualElement.setStaticValue("display", target.display || "block");
     }
+    /**
+     * Record origins before we render and update styles
+     */
+    changedKeys.forEach(function (key) {
+        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+    });
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
     visualElement.syncRender();
     var targetBbox = visualElement.measureViewportBox();
@@ -6250,7 +6251,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, elementComputedStyle));
+        setAndResetVelocity(value, origin[key]);
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;

package/dist/framer-motion.dev.js

@@ -929,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;
@@ -938,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);
@@ -3178,7 +3219,7 @@
                     node.updateScroll();
                 }
                 var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
-                if (!layoutId && !layout)
+                if (layoutId === undefined && !layout)
                     return;
                 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, "");
@@ -4538,6 +4579,7 @@
         "dragListener",
         "dragConstraints",
         "dragDirectionLock",
+        "dragSnapToOrigin",
         "_dragX",
         "_dragY",
         "dragElastic",
@@ -4627,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",
@@ -4646,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;
     }
 
@@ -4671,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.
@@ -4691,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);
         }
     }
 
@@ -4772,6 +4812,7 @@
         "tableValues",
         "viewBox",
         "gradientTransform",
+        "pathLength",
     ]);
 
     function renderSVG(element, renderState) {
@@ -4883,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({
@@ -5603,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();
@@ -7428,11 +7463,18 @@
         var element = visualElement.getInstance();
         var elementComputedStyle = getComputedStyle(element);
         var display = elementComputedStyle.display;
+        var origin = {};
         // If the element is currently set to display: "none", make it visible before
         // measuring the target bounding box
         if (display === "none") {
             visualElement.setStaticValue("display", target.display || "block");
         }
+        /**
+         * Record origins before we render and update styles
+         */
+        changedKeys.forEach(function (key) {
+            origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+        });
         // Apply the latest values (as set in checkAndConvertChangedValueTypes)
         visualElement.syncRender();
         var targetBbox = visualElement.measureViewportBox();
@@ -7440,7 +7482,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, elementComputedStyle));
+            setAndResetVelocity(value, origin[key]);
             target[key] = positionalValues[key](targetBbox, elementComputedStyle);
         });
         return target;