framer-motion 5.0.2 → 5.1.0-rc.1

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/framer-motion.cjs.js

@@ -3437,10 +3437,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 +3452,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 +3479,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 +3499,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 +3580,7 @@ var camelCaseAttributes = new Set([
     "tableValues",
     "viewBox",
     "gradientTransform",
+    "pathLength",
 ]);
 
 function renderSVG(element, renderState) {
@@ -3693,18 +3692,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({

package/dist/framer-motion.dev.js

@@ -4627,10 +4627,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 +4642,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 +4669,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 +4689,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 +4770,7 @@
         "tableValues",
         "viewBox",
         "gradientTransform",
+        "pathLength",
     ]);
 
     function renderSVG(element, renderState) {
@@ -4883,18 +4882,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({