animot-presenter 0.6.4 → 0.6.5

package/dist/utils/arrow-clip-draw.d.ts

@@ -1,9 +1,12 @@
 /**
  * Svelte action for arrow animations. Two strategies depending on mode:
  *
- *  • 'draw' / 'undraw' / 'draw-undraw' — clip-path inset on the host <svg>.
- *    Doesn't touch stroke-dasharray, so dashed/dotted patterns are preserved
- *    while the path is progressively revealed/hidden from one side.
+ *  • 'draw' / 'undraw' / 'draw-undraw' — reveals the stroke ALONG THE PATH using
+ *    stroke-dasharray/offset keyed to the path's total length. This follows the
+ *    real geometry, so curved, looping and spiral arrows draw the way they're
+ *    shaped (a linear clip-path wipe could only sweep left↔right / top↔bottom).
+ *    The arrowhead (a separate sub-path) is revealed in step. Any dashed/dotted
+ *    pattern is overridden during the reveal and restored when fully drawn.
  *
  *  • 'flow' — marching ants. Continuously shifts stroke-dashoffset on the
  *    inner .arrow-path, so the dash pattern appears to flow along the path

package/dist/utils/arrow-clip-draw.js

@@ -1,9 +1,12 @@
 /**
  * Svelte action for arrow animations. Two strategies depending on mode:
  *
- *  • 'draw' / 'undraw' / 'draw-undraw' — clip-path inset on the host <svg>.
- *    Doesn't touch stroke-dasharray, so dashed/dotted patterns are preserved
- *    while the path is progressively revealed/hidden from one side.
+ *  • 'draw' / 'undraw' / 'draw-undraw' — reveals the stroke ALONG THE PATH using
+ *    stroke-dasharray/offset keyed to the path's total length. This follows the
+ *    real geometry, so curved, looping and spiral arrows draw the way they're
+ *    shaped (a linear clip-path wipe could only sweep left↔right / top↔bottom).
+ *    The arrowhead (a separate sub-path) is revealed in step. Any dashed/dotted
+ *    pattern is overridden during the reveal and restored when fully drawn.
  *
  *  • 'flow' — marching ants. Continuously shifts stroke-dashoffset on the
  *    inner .arrow-path, so the dash pattern appears to flow along the path
@@ -13,55 +16,37 @@
 export function arrowClipDraw(node, params) {
     let raf = 0;
     let pathEl = null;
+    let headEl = null;
     let baseDash = '';
     let baseOffset = '';
-    function clearArrowPath() {
-        if (!pathEl)
-            return;
-        pathEl.style.strokeDasharray = baseDash;
-        pathEl.style.strokeDashoffset = baseOffset;
+    function restorePath() {
+        // Back to the element's natural (fully-drawn) appearance.
+        if (pathEl) {
+            pathEl.style.strokeDasharray = baseDash;
+            pathEl.style.strokeDashoffset = baseOffset;
+        }
+        if (headEl)
+            headEl.style.opacity = '';
     }
     function reset() {
         if (raf)
             cancelAnimationFrame(raf);
         raf = 0;
         node.style.clipPath = '';
-        clearArrowPath();
+        restorePath();
     }
     function run() {
         reset();
         if (!params.enabled || params.mode === 'none')
             return;
-        // Capture the inner arrow path (used by 'flow' mode).
         pathEl = node.querySelector('.arrow-path');
-        if (pathEl) {
-            baseDash = pathEl.style.strokeDasharray || '';
-            baseOffset = pathEl.style.strokeDashoffset || '';
-        }
-        // Pick the dominant axis so vertical arrows reveal top↔bottom and horizontal
-        // arrows reveal left↔right. clip-path inset(top right bottom left).
-        const dx = params.endX - params.startX;
-        const dy = params.endY - params.startY;
-        const horizontal = Math.abs(dx) >= Math.abs(dy);
-        const positive = horizontal ? dx >= 0 : dy >= 0;
-        const goesPositive = params.reverse ? !positive : positive;
-        // Build the clip-path string for a given progress (0 = fully hidden,
-        // 100 = fully visible) on the dominant axis.
-        function clip(insetPct) {
-            if (horizontal) {
-                return goesPositive
-                    ? `inset(0 ${insetPct}% 0 0)` // hide from right edge
-                    : `inset(0 0 0 ${insetPct}%)`; // hide from left edge
-            }
-            return goesPositive
-                ? `inset(0 0 ${insetPct}% 0)` // hide from bottom
-                : `inset(${insetPct}% 0 0 0)`; // hide from top
-        }
-        const clipFull = clip(100); // fully hidden (100% inset on hide side)
-        const clipNone = clip(0);
+        headEl = node.querySelector('.arrow-head');
+        if (!pathEl)
+            return;
+        baseDash = pathEl.style.strokeDasharray || '';
+        baseOffset = pathEl.style.strokeDashoffset || '';
         // Round duration so an integer number of cycles fits in slide_duration.
-        // Without this, GIF loop boundary shows the arrow mid-draw → snap to
-        // invisible → re-draw, which the user perceives as a reset.
+        // Without this, a GIF loop boundary can show the arrow mid-draw → snap.
         const requested = Math.max(50, params.duration);
         const dur = params.slideDuration && params.slideDuration > 0 && (params.loop || params.mode === 'flow')
             ? params.slideDuration / Math.max(1, Math.round(params.slideDuration / requested))
@@ -70,21 +55,15 @@ export function arrowClipDraw(node, params) {
         const m = params.mode;
         // FLOW: marching ants — animate dashoffset continuously, keep base pattern.
         if (m === 'flow') {
-            if (!pathEl)
-                return;
-            // If the arrow has no inline dasharray (i.e. it's solid), give it one
-            // so dashes are visible to flow. Otherwise keep the user's pattern.
             const dashAttr = pathEl.getAttribute('stroke-dasharray');
             if (!dashAttr || dashAttr === 'none') {
                 pathEl.style.strokeDasharray = '8 5';
             }
-            // One pixel of dashoffset shift per ms feels like a steady current; use
-            // `duration` as the ms per cycle of 24px (one base dash repeat-ish).
             const cycle = 24;
             const dir = params.reverse ? 1 : -1;
             function flowStep(now) {
                 const elapsed = now - start;
-                const offset = (dir * (elapsed / dur) * cycle) % (cycle * 1000); // huge mod just to keep it bounded
+                const offset = (dir * (elapsed / dur) * cycle) % (cycle * 1000);
                 if (pathEl)
                     pathEl.style.strokeDashoffset = String(offset);
                 raf = requestAnimationFrame(flowStep);
@@ -92,59 +71,95 @@ export function arrowClipDraw(node, params) {
             raf = requestAnimationFrame(flowStep);
             return;
         }
-        // Initial clip-path state for draw modes.
-        if (m === 'draw' || m === 'draw-undraw') {
-            node.style.clipPath = clipFull;
+        // PATH-LENGTH REVEAL for draw / undraw / draw-undraw.
+        let len = 0;
+        try {
+            len = pathEl.getTotalLength();
+        }
+        catch {
+            len = 0;
+        }
+        if (!len) {
+            // Degenerate path — nothing sensible to animate.
+            restorePath();
+            return;
         }
-        else if (m === 'undraw') {
-            node.style.clipPath = clipNone;
+        // dashoffset reveals from the path start (positive) or the path end
+        // (negative) toward the other end, so `reverse` flips the draw direction.
+        const hideOffset = params.reverse ? -len : len;
+        // p: 0 = nothing drawn, 1 = fully drawn (along the path).
+        function setProgress(p) {
+            if (!pathEl)
+                return;
+            pathEl.style.strokeDasharray = `${len} ${len}`;
+            pathEl.style.strokeDashoffset = String(hideOffset * (1 - p));
+        }
+        // Head only shows once the end of the line is reached.
+        function setHead(p) {
+            if (headEl)
+                headEl.style.opacity = p >= 0.999 ? '1' : '0';
+        }
+        const cubicOut = (t) => 1 - Math.pow(1 - t, 3);
+        // Initial frame.
+        if (m === 'undraw') {
+            setProgress(1);
+            setHead(1);
+        }
+        else {
+            setProgress(0);
+            setHead(0);
         }
         function step(now) {
             const elapsed = now - start;
             if (m === 'draw') {
                 const t = Math.min(elapsed / dur, 1);
-                const eased = 1 - Math.pow(1 - t, 3);
-                node.style.clipPath = clip(100 * (1 - eased));
+                const p = cubicOut(t);
+                setProgress(p);
+                setHead(p);
                 if (t < 1)
                     raf = requestAnimationFrame(step);
                 else if (params.loop)
                     run();
                 else {
-                    node.style.clipPath = clipNone;
+                    restorePath();
                     raf = 0;
-                }
+                } // settle fully drawn (restores dashes)
             }
             else if (m === 'undraw') {
                 const t = Math.min(elapsed / dur, 1);
-                const eased = 1 - Math.pow(1 - t, 3);
-                node.style.clipPath = clip(100 * eased);
+                const p = 1 - cubicOut(t);
+                setProgress(p);
+                setHead(p);
                 if (t < 1)
                     raf = requestAnimationFrame(step);
                 else if (params.loop)
                     run();
                 else {
-                    node.style.clipPath = clipFull;
+                    setProgress(0);
+                    setHead(0);
                     raf = 0;
-                }
+                } // settle hidden
             }
             else if (m === 'draw-undraw') {
                 const half = dur / 2;
                 if (elapsed < half) {
-                    const t = Math.min(elapsed / half, 1);
-                    const eased = 1 - Math.pow(1 - t, 3);
-                    node.style.clipPath = clip(100 * (1 - eased));
+                    const p = cubicOut(Math.min(elapsed / half, 1));
+                    setProgress(p);
+                    setHead(p);
                     raf = requestAnimationFrame(step);
                 }
                 else {
                     const t = Math.min((elapsed - half) / half, 1);
-                    const eased = 1 - Math.pow(1 - t, 3);
-                    node.style.clipPath = clip(100 * eased);
+                    const p = 1 - cubicOut(t);
+                    setProgress(p);
+                    setHead(p);
                     if (t < 1)
                         raf = requestAnimationFrame(step);
                     else if (params.loop)
                         run();
                     else {
-                        node.style.clipPath = clipFull;
+                        setProgress(0);
+                        setHead(0);
                         raf = 0;
                     }
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.6.4",
+	"version": "0.6.5",
 	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
 	"type": "module",
 	"svelte": "./dist/index.js",