@humanspeak/svelte-motion 0.5.4 → 0.6.1

package/dist/utils/optimizedAppear.js

@@ -0,0 +1,311 @@
+import { mergeInlineStyles } from './style';
+import { resolveRestingValues } from './variants';
+import { startWaapiAnimation } from 'motion';
+import { mapEasingToNativeEasing, optimizedAppearDataAttribute, optimizedAppearDataId, transformProps } from 'motion-dom';
+const appearStoreId = (elementId, valueName) => {
+    const key = transformProps.has(valueName) ? 'transform' : valueName;
+    return `${elementId}: ${key}`;
+};
+const getAppearStore = () => {
+    if (typeof window === 'undefined')
+        return undefined;
+    window.__SvelteMotionAppear ??= {
+        animations: new Map(),
+        complete: new Map(),
+        started: []
+    };
+    return window.__SvelteMotionAppear;
+};
+const installAppearGlobals = () => {
+    if (typeof window === 'undefined')
+        return;
+    const store = getAppearStore();
+    if (!store)
+        return;
+    window.MotionHasOptimisedAnimation ??= (elementId, valueName) => {
+        if (!elementId)
+            return false;
+        if (!valueName)
+            return store.complete.has(elementId);
+        return store.animations.has(appearStoreId(elementId, valueName));
+    };
+    window.MotionHandoffMarkAsComplete ??= (elementId) => {
+        if (store.complete.has(elementId)) {
+            store.complete.set(elementId, true);
+        }
+    };
+    window.MotionHandoffIsComplete ??= (elementId) => {
+        return store.complete.get(elementId) === true;
+    };
+    window.MotionCancelOptimisedAnimation ??= (elementId, valueName) => {
+        if (!elementId || !valueName)
+            return;
+        const animationId = appearStoreId(elementId, valueName);
+        const data = store.animations.get(animationId);
+        if (!data)
+            return;
+        data.animation.cancel();
+        store.animations.delete(animationId);
+        if (!store.animations.size) {
+            window.MotionCancelOptimisedAnimation = undefined;
+        }
+    };
+};
+const readStyleProp = (style, prop) => {
+    return style
+        .split(';')
+        .map((part) => part.trim())
+        .find((part) => part.startsWith(`${prop}:`))
+        ?.slice(prop.length + 1)
+        .trim();
+};
+const toNativeOptions = (transition) => {
+    const duration = typeof transition?.duration === 'number' ? transition.duration : 0.3;
+    const delay = typeof transition?.delay === 'number' ? transition.delay : 0;
+    const durationMs = duration * 1000;
+    const options = {
+        duration: durationMs,
+        delay: delay * 1000,
+        fill: 'both'
+    };
+    const easing = mapEasingToNativeEasing(transition?.ease, durationMs);
+    if (Array.isArray(easing)) {
+        options.easing = easing[0] ?? 'linear';
+    }
+    else if (easing) {
+        options.easing = easing;
+    }
+    return options;
+};
+/**
+ * Build serialisable optimized-appear animation entries from an initial and
+ * animate pair.
+ *
+ * @param initial Initial keyframes reflected into SSR markup.
+ * @param animate Target keyframes for the enter animation.
+ * @param transition Motion transition options.
+ * @returns Appear entries for WAAPI-supported opacity and transform values.
+ *
+ * @example
+ * ```ts
+ * const entries = createOptimizedAppearData(
+ *     { opacity: 0, scale: 0.8 },
+ *     { opacity: 1, scale: 1 },
+ *     { duration: 0.6, ease: [0.16, 1, 0.3, 1] }
+ * )
+ * ```
+ */
+export const createOptimizedAppearData = (initial, animate, transition) => {
+    if (!initial || !animate)
+        return [];
+    const target = resolveRestingValues(animate);
+    if (!target)
+        return [];
+    const options = toNativeOptions(transition);
+    const entries = [];
+    if (initial.opacity != null && target.opacity != null) {
+        entries.push({
+            name: 'opacity',
+            keyframes: [
+                Array.isArray(initial.opacity) ? initial.opacity[0] : initial.opacity,
+                Array.isArray(target.opacity) ? target.opacity[0] : target.opacity
+            ],
+            options
+        });
+    }
+    const initialTransform = readStyleProp(mergeInlineStyles('', initial), 'transform');
+    const targetTransform = readStyleProp(mergeInlineStyles('', target), 'transform');
+    if (initialTransform && targetTransform && initialTransform !== targetTransform) {
+        entries.push({
+            name: 'transform',
+            keyframes: [initialTransform, targetTransform],
+            options
+        });
+    }
+    return entries;
+};
+/**
+ * Create the inline SSR bootstrap that starts appear animations before Svelte
+ * hydrates the component tree.
+ *
+ * @param appearId Stable optimized-appear id attached to the motion element.
+ * @param entries WAAPI animation entries to start.
+ * @returns A script tag string, or an empty string when no entries exist.
+ *
+ * @example
+ * ```ts
+ * const script = createOptimizedAppearScript('appear-1', [
+ *     { name: 'opacity', keyframes: [0, 1], options: { duration: 300, fill: 'both' } }
+ * ])
+ * ```
+ */
+export const createOptimizedAppearScript = (appearId, entries) => {
+    if (!appearId || entries.length === 0)
+        return '';
+    const payload = JSON.stringify({ id: appearId, entries }).replace(/</g, '\\u003c');
+    return `<script>(()=>{const p=${payload},w=window;if(w.MotionIsMounted)return;const q=String(p.id).replace(/["\\\\]/g,"\\\\$&");const e=document.querySelector('[${optimizedAppearDataAttribute}="'+q+'"]');if(!e||!e.animate)return;const s=w.__SvelteMotionAppear||(w.__SvelteMotionAppear={animations:new Map,complete:new Map,started:[]});const k=(id,n)=>id+": "+(n==="transform"?"transform":n);w.MotionHasOptimisedAnimation=w.MotionHasOptimisedAnimation||((id,n)=>id?n?s.animations.has(k(id,n)):s.complete.has(id):false);w.MotionHandoffMarkAsComplete=w.MotionHandoffMarkAsComplete||((id)=>{if(s.complete.has(id))s.complete.set(id,true)});w.MotionHandoffIsComplete=w.MotionHandoffIsComplete||((id)=>s.complete.get(id)===true);w.MotionCancelOptimisedAnimation=w.MotionCancelOptimisedAnimation||((id,n)=>{const key=k(id,n),d=s.animations.get(key);if(!d)return;d.animation.cancel();s.animations.delete(key);if(!s.animations.size)w.MotionCancelOptimisedAnimation=undefined});s.complete.set(p.id,false);for(const a of p.entries){const key=k(p.id,a.name);if(!s.readyAnimation){s.readyAnimation=e.animate({[a.name]:[a.keyframes[0],a.keyframes[0]]},{duration:1e4,easing:"linear",fill:"both"});s.animations.set(key,{animation:s.readyAnimation,startTime:null})}const start=()=>{s.readyAnimation.cancel();let t=s.startFrameTime;if(t===undefined){t=performance.now();s.startFrameTime=t}const anim=e.animate({[a.name]:a.keyframes},a.options);anim.startTime=t;s.animations.set(key,{animation:anim,startTime:t});s.started.push({id:p.id,name:a.name})};const r=s.readyAnimation;r.ready?r.ready.then(start).catch(()=>{}):start()}})();</script>`;
+};
+/**
+ * Start an optimized appear animation imperatively.
+ *
+ * Mirrors Framer Motion's `startOptimizedAppearAnimation`: if Motion has
+ * already mounted, this intentionally does nothing.
+ *
+ * @param element Element carrying `data-framer-appear-id`.
+ * @param name CSS property to animate.
+ * @param keyframes WAAPI keyframes for the property.
+ * @param options Motion animation options.
+ * @param onReady Optional callback receiving the started animation.
+ * @returns Nothing.
+ *
+ * @example
+ * ```ts
+ * const element = document.querySelector('[data-framer-appear-id]')
+ * if (element instanceof HTMLElement) {
+ *     startOptimizedAppearAnimation(element, 'opacity', [0, 1], { duration: 0.3 })
+ * }
+ * ```
+ */
+export const startOptimizedAppearAnimation = (element, name, keyframes, options, onReady) => {
+    if (typeof window === 'undefined' || window.MotionIsMounted)
+        return;
+    const id = element.dataset[optimizedAppearDataId];
+    if (!id)
+        return;
+    installAppearGlobals();
+    const store = getAppearStore();
+    if (!store)
+        return;
+    const storeId = appearStoreId(id, name);
+    if (!store.readyAnimation) {
+        store.readyAnimation = startWaapiAnimation(element, name, [keyframes[0], keyframes[0]], {
+            duration: 10000,
+            ease: 'linear'
+        });
+        store.animations.set(storeId, { animation: store.readyAnimation, startTime: null });
+    }
+    const startAnimation = () => {
+        store.readyAnimation?.cancel();
+        store.startFrameTime ??= performance.now();
+        const animation = startWaapiAnimation(element, name, keyframes, options);
+        animation.startTime = store.startFrameTime;
+        store.animations.set(storeId, { animation, startTime: store.startFrameTime });
+        store.started.push({ id, name });
+        onReady?.(animation);
+    };
+    store.complete.set(id, false);
+    const readyAnimation = store.readyAnimation;
+    if (readyAnimation.ready) {
+        readyAnimation.ready.then(startAnimation).catch(() => { });
+    }
+    else {
+        startAnimation();
+    }
+};
+/**
+ * Commit and cancel optimized appear animations for an element.
+ *
+ * @param elementId Optimized appear id.
+ * @returns `true` when at least one optimized animation was handed off.
+ *
+ * @example
+ * ```ts
+ * const wasHandedOff = handoffOptimizedAppearAnimation('appear-1')
+ * if (wasHandedOff) {
+ *     console.log('Animation handed off to runtime')
+ * }
+ * ```
+ */
+export const handoffOptimizedAppearAnimation = (elementId) => {
+    if (!elementId || typeof window === 'undefined')
+        return false;
+    const store = getAppearStore();
+    if (!store)
+        return false;
+    let handedOff = false;
+    for (const [key, data] of [...store.animations]) {
+        if (!key.startsWith(`${elementId}: `))
+            continue;
+        data.animation.commitStyles?.();
+        data.animation.cancel();
+        store.animations.delete(key);
+        handedOff = true;
+    }
+    if (store.complete.has(elementId)) {
+        store.complete.set(elementId, true);
+    }
+    return handedOff;
+};
+/**
+ * Let active optimized appear animations finish before handing their final
+ * styles back to Svelte Motion.
+ *
+ * @param elementId Optimized appear id.
+ * @returns Whether at least one optimized animation was adopted.
+ *
+ * @example
+ * ```ts
+ * const wasAdopted = await finishOptimizedAppearAnimation('appear-1')
+ * if (wasAdopted) {
+ *     console.log('Animation finished and adopted')
+ * }
+ * ```
+ */
+export const finishOptimizedAppearAnimation = async (elementId) => {
+    if (!elementId || typeof window === 'undefined')
+        return false;
+    const store = getAppearStore();
+    if (!store)
+        return false;
+    let entries = [...store.animations].filter(([key]) => key.startsWith(`${elementId}: `));
+    if (!entries.length)
+        return false;
+    await Promise.all(entries.map(([, data]) => data.startTime === null ? data.animation.ready?.catch(() => undefined) : undefined));
+    entries = [...store.animations].filter(([key]) => key.startsWith(`${elementId}: `));
+    await Promise.all(entries.map(([, data]) => data.animation.finished.catch(() => undefined)));
+    for (const [key, data] of entries) {
+        if (!store.animations.has(key))
+            continue;
+        data.animation.commitStyles?.();
+        data.animation.cancel();
+        store.animations.delete(key);
+    }
+    if (store.complete.has(elementId)) {
+        store.complete.set(elementId, true);
+    }
+    return true;
+};
+/**
+ * Check whether an optimized appear animation is active for an element.
+ *
+ * @param elementId Optimized appear id.
+ * @returns Whether any optimized appear animation is currently registered.
+ *
+ * @example
+ * ```ts
+ * if (hasOptimizedAppearAnimation('appear-1')) {
+ *     console.log('Animation is active')
+ * }
+ * ```
+ */
+export const hasOptimizedAppearAnimation = (elementId) => {
+    if (!elementId || typeof window === 'undefined')
+        return false;
+    return window.MotionHasOptimisedAnimation?.(elementId) ?? false;
+};
+/**
+ * Mark Motion as mounted so late optimized-appear starters no-op.
+ *
+ * @returns Nothing.
+ *
+ * @example
+ * ```ts
+ * markMotionMounted()
+ * ```
+ */
+export const markMotionMounted = () => {
+    if (typeof window !== 'undefined') {
+        window.MotionIsMounted = true;
+    }
+};
+export { optimizedAppearDataAttribute };

package/dist/utils/presence.d.ts

@@ -16,10 +16,11 @@ export type AnimatePresenceContext = {
      */
     shouldAnimateEnter: (key: string) => boolean;
     /**
-     * For mode='wait': Returns true if enters should be blocked (exits in progress).
+     * For mode='wait': Returns true if enters should be blocked by an exiting
+     * or currently-present sibling.
      * Motion elements should delay their enter animation until this returns false.
      */
-    isEnterBlocked: () => boolean;
+    isEnterBlocked: (key?: string) => boolean;
     /**
      * For mode='wait': Register a callback to be invoked when enters are unblocked.
      * Returns an unsubscribe function.

package/dist/utils/presence.js

@@ -31,6 +31,15 @@ const resetTransforms = (element) => {
     s.MozTransform = 'none';
     s.OTransform = 'none';
 };
+const findLayoutInsertionParent = (element) => {
+    let before = element;
+    let parent = element.parentElement;
+    while (parent && getComputedStyle(parent).display === 'contents') {
+        before = parent;
+        parent = parent.parentElement;
+    }
+    return parent ? { parent, before } : null;
+};
 /**
  * Create a new `AnimatePresence` context instance.
  *
@@ -130,10 +139,20 @@ export const createAnimatePresenceContext = (context) => {
      * }
      * ```
      */
-    const isEnterBlocked = () => {
-        // For wait mode, block enters only when there are actual in-flight exits
-        const blocked = mode === 'wait' && inFlightExits > 0;
-        pwLog('[presence] isEnterBlocked', { blocked, mode, inFlightExits });
+    const isEnterBlocked = (key) => {
+        if (mode !== 'wait') {
+            pwLog('[presence] isEnterBlocked', { blocked: false, mode, inFlightExits, key });
+            return false;
+        }
+        const hasBlockingSibling = key !== undefined && Array.from(children.keys()).some((childKey) => childKey !== key);
+        const blocked = inFlightExits > 0 || hasBlockingSibling;
+        pwLog('[presence] isEnterBlocked', {
+            blocked,
+            mode,
+            inFlightExits,
+            key,
+            hasBlockingSibling
+        });
         return blocked;
     };
     /**
@@ -286,7 +305,8 @@ export const createAnimatePresenceContext = (context) => {
             exit,
             mergedTransition,
             lastRect: initialRect,
-            lastComputedStyle: initialStyle
+            lastComputedStyle: initialStyle,
+            layoutInsertion: findLayoutInsertionParent(element) ?? undefined
         });
     };
     /**
@@ -337,12 +357,14 @@ export const createAnimatePresenceContext = (context) => {
         }
         const rect = child.lastRect;
         const computed = child.lastComputedStyle;
-        // For sync/wait, preserve layout by inserting a hidden placeholder.
-        // For popLayout, we remove from layout immediately (no placeholder).
-        const shouldPreserveLayout = mode !== 'popLayout';
+        // Wait mode holds the exiting layout slot while the entering child is hidden.
+        // Sync and popLayout must not add an extra layout participant.
+        const shouldPreserveLayout = mode === 'wait';
         let placeholder = null;
-        const layoutParent = child.element.parentElement;
-        if (shouldPreserveLayout && layoutParent) {
+        const liveLayoutInsertion = findLayoutInsertionParent(child.element);
+        const layoutInsertion = liveLayoutInsertion ??
+            (child.layoutInsertion?.parent.isConnected ? child.layoutInsertion : null);
+        if (shouldPreserveLayout && layoutInsertion) {
             placeholder = document.createElement(child.element.tagName.toLowerCase());
             placeholder.setAttribute('data-presence-placeholder', 'true');
             placeholder.style.display = computed.display === 'contents' ? 'block' : computed.display;
@@ -359,7 +381,22 @@ export const createAnimatePresenceContext = (context) => {
             if (computed.alignSelf) {
                 placeholder.style.alignSelf = computed.alignSelf;
             }
-            layoutParent.insertBefore(placeholder, child.element);
+            if (computed.gridColumnStart) {
+                placeholder.style.gridColumnStart = computed.gridColumnStart;
+            }
+            if (computed.gridColumnEnd) {
+                placeholder.style.gridColumnEnd = computed.gridColumnEnd;
+            }
+            if (computed.gridRowStart) {
+                placeholder.style.gridRowStart = computed.gridRowStart;
+            }
+            if (computed.gridRowEnd) {
+                placeholder.style.gridRowEnd = computed.gridRowEnd;
+            }
+            const before = layoutInsertion.before?.parentElement === layoutInsertion.parent
+                ? layoutInsertion.before
+                : null;
+            layoutInsertion.parent.insertBefore(placeholder, before);
         }
         // Clone original node to preserve structure/classes, then inline computed styles to freeze look
         const clone = child.element.cloneNode(true);
@@ -485,7 +522,6 @@ export const createAnimatePresenceContext = (context) => {
                     // ignore
                 }
                 clone.remove();
-                placeholder?.remove();
                 // Log clone removal and element counts for debugging rapid toggle
                 pwLog('[presence] clone REMOVED from DOM', {
                     key,
@@ -514,6 +550,7 @@ export const createAnimatePresenceContext = (context) => {
                     inFlightExits: inFlightExits - 1,
                     clonesInDOM: document.querySelectorAll('[data-clone="true"]').length
                 });
+                placeholder?.remove();
                 finishExit();
             });
         });

package/dist/utils/projection.d.ts

@@ -78,9 +78,9 @@ export interface ProjectionNodeOptions {
     /**
      * Thunk returning the `layoutScroll` ancestor chain at measure
      * time. Used as the second argument to `measureRect`, which
-     * shifts the returned rect by the sum of ancestor
-     * `scrollLeft`/`scrollTop` so FLIP deltas stay correct when
-     * scrollable ancestors scroll between two measurements.
+     * shifts the returned rect by the viewport scroll plus the sum of
+     * ancestor `scrollLeft`/`scrollTop` so FLIP deltas stay correct
+     * when the page or scrollable ancestors scroll between two measurements.
      *
      * Returning `[]` (or omitting the option entirely) gives
      * viewport-relative measurements — fine for the common case.

package/dist/utils/projection.js

@@ -236,7 +236,7 @@ export class ProjectionNode {
             for (const { el, base } of restoreList)
                 el.style.transform = base;
             // measureRect applies self's base transform + scroll-container offset.
-            const rect = measureRect(this.element, this.getScrollContainers?.() ?? [], this.resolveBaseTransform());
+            const rect = measureRect(this.element, this.getScrollContainers?.() ?? [], this.resolveBaseTransform(), true);
             const box = rectToBox(rect);
             this.latestLayout = box;
             // Clone for the event: `box` aliases `this.latestLayout`, so a

package/dist/utils/svg.d.ts

@@ -69,8 +69,8 @@ export declare const isSVGElement: (element: Element) => element is SVGElement;
  *
  * Normalized behavior (React/Framer Motion parity):
  * - Ensures `pathLength="1"` is set when any path prop is present
- * - Maps `pathLength`/`pathSpacing` → `stroke-dasharray` (px)
- * - Maps `pathOffset` → `stroke-dashoffset` (negative px)
+ * - Maps `pathLength`/`pathSpacing` → unitless `stroke-dasharray`
+ * - Maps `pathOffset` → unitless negative `stroke-dashoffset`
  *
  * @param {Element} element The element being animated (must be an SVG path).
  * @param {Record<string, unknown>} keyframes The input keyframes possibly containing path props.
@@ -105,8 +105,8 @@ export declare const transformInitialSVGPathProperties: (element: Element, initi
  *
  * Behavior matches React/Framer Motion parity:
  * - Always sets pathLength="1" whenever any of path props are present
- * - stroke-dasharray = px(pathLength) + ' ' + px(pathSpacing ?? 1 - Number(pathLength))
- * - stroke-dashoffset = px(-(pathOffset ?? 0))
+ * - stroke-dasharray = pathLength + ' ' + (pathSpacing ?? 1)
+ * - stroke-dashoffset = -(pathOffset ?? 0)
  *
  * The returned object is suitable for direct DOM attribute assignment (dash-cased keys).
  *

package/dist/utils/svg.js

@@ -1,3 +1,4 @@
+import { buildSVGPath } from 'motion-dom';
 /**
  * SVG-specific properties that need special handling during animation.
  * These properties are not standard CSS properties and need to be transformed.
@@ -145,8 +146,8 @@ export const isSVGElement = (element) => {
  *
  * Normalized behavior (React/Framer Motion parity):
  * - Ensures `pathLength="1"` is set when any path prop is present
- * - Maps `pathLength`/`pathSpacing` → `stroke-dasharray` (px)
- * - Maps `pathOffset` → `stroke-dashoffset` (negative px)
+ * - Maps `pathLength`/`pathSpacing` → unitless `stroke-dasharray`
+ * - Maps `pathOffset` → unitless negative `stroke-dashoffset`
  *
  * @param {Element} element The element being animated (must be an SVG path).
  * @param {Record<string, unknown>} keyframes The input keyframes possibly containing path props.
@@ -189,46 +190,65 @@ export const transformSVGPathProperties = (element, keyframes) => {
             const n = toNum(v);
             return n ?? v;
         })();
-        const toPx = (v) => (typeof v === 'number' ? `${v}px` : String(v));
-        const buildDashArray = (len, spa) => `${toPx(len)} ${toPx(spa)}`;
-        // stroke-dasharray from pathLength/pathSpacing with default spacing = 1 - length
+        const toUnitless = (v) => (typeof v === 'number' ? `${v}` : String(v));
+        const buildDashArray = (len, spa) => `${toUnitless(len)} ${toUnitless(spa)}`;
+        // stroke-dasharray from pathLength/pathSpacing with upstream's default spacing = 1
         if (Array.isArray(length)) {
             const lenArr = length;
             const spaArr = Array.isArray(spacing)
                 ? spacing
-                : lenArr.map((lv) => typeof lv === 'number' ? 1 - lv : spacing);
+                : lenArr.map(() => (spacing !== undefined ? spacing : 1));
             const dashArray = lenArr.map((lv, i) => buildDashArray(lv, spaArr[i]));
             transformed.strokeDasharray = dashArray;
             transformed['stroke-dasharray'] = dashArray;
         }
         else if (length !== undefined) {
-            const len = length;
-            const lenNum = toNum(len) ?? 0;
-            const spa = spacing !== undefined ? spacing : 1 - lenNum;
-            const dashArray = buildDashArray(len, spa);
+            const lenNum = toNum(length);
+            const spaNum = spacing === undefined ? undefined : toNum(spacing);
+            const offsetNum = offset === undefined ? undefined : toNum(offset);
+            let dashArray;
+            let dashOffset;
+            if (lenNum !== undefined &&
+                (spacing === undefined || spaNum !== undefined) &&
+                (offset === undefined || offsetNum !== undefined)) {
+                const attrs = {};
+                buildSVGPath(attrs, lenNum, spacing === undefined ? 1 : spaNum, offsetNum, true);
+                dashArray = String(attrs['stroke-dasharray']);
+                dashOffset = String(attrs['stroke-dashoffset']);
+            }
+            else {
+                const spa = spacing !== undefined ? spacing : 1;
+                dashArray = buildDashArray(length, spa);
+            }
+            ;
             transformed.strokeDasharray = dashArray;
             transformed['stroke-dasharray'] = dashArray;
+            if (dashOffset !== undefined) {
+                ;
+                transformed.strokeDashoffset = dashOffset;
+                transformed['stroke-dashoffset'] = dashOffset;
+            }
         }
         // stroke-dashoffset from -pathOffset
         if (Array.isArray(offset)) {
             const offs = offset.map((ov) => {
                 const n = toNum(ov);
-                return n !== undefined ? `${-n}px` : String(ov);
+                return n !== undefined ? `${-n}` : String(ov);
             });
             transformed.strokeDashoffset = offs;
             transformed['stroke-dashoffset'] = offs;
         }
         else if (offset !== undefined) {
             const n = toNum(offset);
-            const off = n !== undefined ? `${-n}px` : String(offset);
+            const off = n !== undefined ? `${-n}` : String(offset);
             transformed.strokeDashoffset = off;
             transformed['stroke-dashoffset'] = off;
         }
-        else {
+        else if (!('stroke-dashoffset' in transformed)) {
             // default 0
             ;
-            transformed.strokeDashoffset = '0px';
-            transformed['stroke-dashoffset'] = '0px';
+            transformed.strokeDashoffset = '0';
+            transformed['stroke-dashoffset'] = '0';
         }
         delete transformed.pathLength;
         delete transformed.pathSpacing;
@@ -273,8 +293,8 @@ export const transformInitialSVGPathProperties = (element, initial) => {
  *
  * Behavior matches React/Framer Motion parity:
  * - Always sets pathLength="1" whenever any of path props are present
- * - stroke-dasharray = px(pathLength) + ' ' + px(pathSpacing ?? 1 - Number(pathLength))
- * - stroke-dashoffset = px(-(pathOffset ?? 0))
+ * - stroke-dasharray = pathLength + ' ' + (pathSpacing ?? 1)
+ * - stroke-dashoffset = -(pathOffset ?? 0)
  *
  * The returned object is suitable for direct DOM attribute assignment (dash-cased keys).
  *
@@ -287,19 +307,18 @@ export const computeNormalizedSVGInitialAttrs = (initial) => {
     const hasAny = 'pathLength' in initial || 'pathSpacing' in initial || 'pathOffset' in initial;
     if (!hasAny)
         return null;
-    const toPx = (v) => (typeof v === 'number' ? `${v}px` : String(v));
-    const negatePx = (v) => {
+    const toUnitless = (v) => (typeof v === 'number' ? `${v}` : String(v));
+    const negate = (v) => {
         if (typeof v === 'number')
-            return `${-v}px`;
+            return `${-v}`;
         const s = String(v);
-        return s.startsWith('-') ? s : /^[\d.]+(px)?$/i.test(s) ? `-${s}` : s;
+        return s.startsWith('-') ? s : /^[\d.]+(px)?$/i.test(s) ? `-${s.replace(/px$/i, '')}` : s;
     };
     const len = initial.pathLength ?? 0;
-    const spa = initial.pathSpacing ??
-        (typeof len === 'number' ? 1 - len : 1);
+    const spa = initial.pathSpacing ?? 1;
     const off = initial.pathOffset ?? 0;
-    const dashArray = `${toPx(len)} ${toPx(spa)}`;
-    const dashOffset = negatePx(off);
+    const dashArray = `${toUnitless(len)} ${toUnitless(spa)}`;
+    const dashOffset = negate(off);
     // logging removed
     return {
         pathLength: '1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.5.4",
+  "version": "0.6.1",
   "description": "Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values. The drop-in Framer Motion alternative for Svelte and SvelteKit.",
   "keywords": [
     "svelte",