motion-v 0.13.0 → 0.13.1-alpha.1

package/dist/es/state/style.mjs

@@ -1,5 +1,6 @@
 import { isNumber, isCssVar } from "./utils.mjs";
 import { isTransform, transformAlias, transformDefinitions, buildTransformTemplate } from "./transform.mjs";
+import { px } from "../value/types/numbers/units.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const style = {
   get: (element, name) => {
@@ -60,15 +61,12 @@ const SVG_STYLE_TO_ATTRIBUTES = {
   cy: true,
   r: true,
   d: true,
-  x: true,
-  y: true,
   x1: true,
   y1: true,
   x2: true,
   y2: true,
   points: true,
   pathLength: true,
-  transform: true,
   viewBox: true,
   width: true,
   height: true,
@@ -92,19 +90,31 @@ const SVG_STYLE_TO_ATTRIBUTES = {
   letterSpacing: true,
   vectorEffect: true
 };
+function buildSVGPath(attrs, length, spacing = 1, offset = 0) {
+  attrs.pathLength = 1;
+  attrs["stroke-dashoffset"] = px.transform(-offset);
+  const pathLength = px.transform(length);
+  const pathSpacing = px.transform(spacing);
+  attrs["stroke-dasharray"] = `${pathLength} ${pathSpacing}`;
+}
 function convertSvgStyleToAttributes(keyframes) {
   const attributes = {};
   const styleProps = {};
+  let shouldBuildPath = false;
   for (const key in keyframes) {
     if (key in SVG_STYLE_TO_ATTRIBUTES) {
-      const attrKey = SVG_STYLE_TO_ATTRIBUTES[key];
-      const attrName = typeof attrKey === "string" ? attrKey : key;
+      if (key === "pathLength") {
+        shouldBuildPath = true;
+      }
       const value = keyframes[key];
-      attributes[attrName] = isMotionValue(value) ? value.get() : value;
+      attributes[key] = isMotionValue(value) ? value.get() : value;
     } else {
       styleProps[key] = keyframes[key];
     }
   }
+  if (shouldBuildPath) {
+    buildSVGPath(attributes, attributes.pathLength, attributes.pathSpacing, attributes.pathOffset);
+  }
   return {
     attributes,
     style: styleProps

package/dist/es/value/types/numbers/units.mjs

@@ -6,6 +6,8 @@ function createUnitType(unit) {
   };
 }
 const percent = /* @__PURE__ */ createUnitType("%");
+const px = /* @__PURE__ */ createUnitType("px");
 export {
-  percent
+  percent,
+  px
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.13.0",
+  "version": "0.13.1-alpha.1",
   "description": "",
   "author": "",
   "license": "MIT",