svg-scroll-draw 2.23.1 → 2.23.4

package/dist/cdn/svg-scroll-draw.dev.global.js

@@ -150,7 +150,7 @@ var SvgScrollDraw = (() => {
     const rect = el.getBoundingClientRect();
     const size = axis === "x" ? rect.width : rect.height;
     if (scrollEl) {
-      const top = axis === "x" ? rect.left - scrollEl.getBoundingClientRect().left + scrollEl.scrollLeft : rect.top - scrollEl.getBoundingClientRect().top + scrollEl.scrollTop;
+      const top = axis === "x" ? rect.left - scrollEl.getBoundingClientRect().left - scrollEl.clientLeft + scrollEl.scrollLeft : rect.top - scrollEl.getBoundingClientRect().top - scrollEl.clientTop + scrollEl.scrollTop;
       return { top, height: size, scroll: 0 };
     }
     return {
@@ -162,6 +162,8 @@ var SvgScrollDraw = (() => {
 
   // src/core/geometry.ts
   function getElementLength(el) {
+    const declared = parseFloat(el.getAttribute("pathLength") ?? "");
+    if (declared > 0) return declared;
     const tag = el.tagName.toLowerCase();
     if (tag === "rect") {
       const w = parseFloat(el.getAttribute("width") ?? "0");
@@ -536,8 +538,8 @@ var SvgScrollDraw = (() => {
     } = options;
     const clipDirection = clip === true ? "left" : typeof clip === "string" ? clip : false;
     const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS.linear;
-    const startConfig = parseTrigger(trigger.start ?? "top bottom");
-    const endConfig = parseTrigger(trigger.end ?? "bottom top");
+    const startConfig = parseTrigger(trigger.start || "top bottom");
+    const endConfig = parseTrigger(trigger.end || "bottom top");
     const scrollEl = typeof scrollContainer === "string" ? document.querySelector(scrollContainer) : scrollContainer ?? null;
     const colorFrom = Array.isArray(strokeColor) ? strokeColor[0] : null;
     const colorTo = Array.isArray(strokeColor) ? strokeColor[1] : typeof strokeColor === "string" ? strokeColor : null;
@@ -630,6 +632,9 @@ var SvgScrollDraw = (() => {
       };
       return inst;
     }
+    function latch(i, raw) {
+      return once && !autoReverse ? Math.max(frozenAlpha, easeFn(frozenPath[i] = Math.max(frozenPath[i] ?? 0, raw))) : easeFn(raw);
+    }
     function applyAlpha(alpha, dir) {
       container.style.setProperty("--scroll-draw-progress", String(alpha));
       if (clipDirection) {
@@ -637,28 +642,28 @@ var SvgScrollDraw = (() => {
         container.style.clipPath = computeClipPath(a);
         return;
       }
-      paths.forEach((el, i) => {
-        el.style.strokeDashoffset = dir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
-        if (fade) el.style.opacity = dir === "reverse" ? `${1 - alpha}` : `${alpha}`;
-        if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
-        else if (colorTo) el.style.stroke = colorTo;
-        if (widthFrom !== null && widthTo !== null)
-          el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
-        else if (widthTo !== null)
-          el.style.strokeWidth = `${widthTo}`;
-        if (fillOpacityFrom !== null && fillOpacityTo !== null)
-          el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
-        else if (fillOpacityTo !== null)
-          el.style.fillOpacity = `${fillOpacityTo}`;
-        if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i]) {
-          el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
-        }
-      });
+      paths.forEach((el, i) => paint(el, i, alpha, dir));
+    }
+    function paint(el, i, alpha, dir) {
+      el.style.strokeDashoffset = dir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
+      if (fade) el.style.opacity = dir === "reverse" ? `${1 - alpha}` : `${alpha}`;
+      if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
+      else if (colorTo) el.style.stroke = colorTo;
+      if (widthFrom !== null && widthTo !== null)
+        el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
+      else if (widthTo !== null)
+        el.style.strokeWidth = `${widthTo}`;
+      if (fillOpacityFrom !== null && fillOpacityTo !== null)
+        el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
+      else if (fillOpacityTo !== null)
+        el.style.fillOpacity = `${fillOpacityTo}`;
+      if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
+        el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
     }
     function resetPaths() {
       container.style.setProperty("--scroll-draw-progress", "0");
       if (clipDirection) {
-        container.style.clipPath = computeClipPath(0);
+        container.style.clipPath = computeClipPath(direction === "reverse" ? 1 : 0);
         return;
       }
       paths.forEach((el, i) => {
@@ -673,13 +678,26 @@ var SvgScrollDraw = (() => {
           el.setAttribute("d", originalDs[i]);
       });
     }
-    paths.forEach((el) => {
+    function measure(el, i) {
+      const d = el.getAttribute("d");
+      let len = getElementLength(el);
+      if (morphTo && originalDs[i]) {
+        el.setAttribute("d", morphTo);
+        const target = getElementLength(el);
+        el.setAttribute("d", originalDs[i]);
+        len = Math.max(getElementLength(el), target);
+        el.setAttribute("d", d);
+      }
+      lengths[i] = len;
+      el.style.strokeDasharray = `${len}`;
+    }
+    paths.forEach((el, i) => {
       checkElement(el);
-      const len = getElementLength(el);
-      lengths.push(len);
       const isPath = el.tagName.toLowerCase() === "path";
       if (isPath) originalDs.push(el.getAttribute("d") ?? "");
       else originalDs.push("");
+      measure(el, i);
+      const len = lengths[i];
       if (morphTo) {
         if (!isPath) {
           warn(`morphTo only applies to <path> elements \u2014 ignored on <${el.tagName}>.`, el);
@@ -688,7 +706,6 @@ var SvgScrollDraw = (() => {
         }
       }
       if (prefersReduced) {
-        el.style.strokeDasharray = `${len}`;
         el.style.strokeDashoffset = direction === "reverse" ? `${len}` : "0";
         if (fade) el.style.opacity = "1";
         if (colorTo) el.style.stroke = colorTo;
@@ -696,7 +713,6 @@ var SvgScrollDraw = (() => {
         if (fillOpacityTo !== null) el.style.fillOpacity = `${fillOpacityTo}`;
         if (morphTo && el.tagName.toLowerCase() === "path") el.setAttribute("d", morphTo);
       } else {
-        el.style.strokeDasharray = `${len}`;
         el.style.strokeDashoffset = direction === "reverse" ? "0" : `${len}`;
         if (fade) el.style.opacity = direction === "reverse" ? "1" : "0";
         else el.style.opacity = "";
@@ -705,19 +721,8 @@ var SvgScrollDraw = (() => {
         if (fillOpacityFrom !== null) el.style.fillOpacity = `${fillOpacityFrom}`;
       }
     });
-    if (clipDirection) {
-      if (prefersReduced) {
-        container.style.clipPath = computeClipPath(1);
-        onComplete?.();
-        return { destroy: () => {
-        }, replay: () => {
-        }, pause: () => {
-        }, resume: () => {
-        }, seek: () => {
-        }, getProgress: () => 1 };
-      }
-      container.style.clipPath = computeClipPath(0);
-    } else if (prefersReduced) {
+    if (prefersReduced) {
+      if (clipDirection) container.style.clipPath = computeClipPath(1);
       onComplete?.();
       return { destroy: () => {
       }, replay: () => {
@@ -726,9 +731,12 @@ var SvgScrollDraw = (() => {
       }, seek: () => {
       }, getProgress: () => 1 };
     }
+    if (clipDirection) container.style.clipPath = computeClipPath(direction === "reverse" ? 1 : 0);
     const cssTiming = typeof easing === "string" ? cssTimingFor(easing) : null;
     function nativeEligible() {
       if (native === false) return false;
+      if (autoplay) return false;
+      if (debug && IS_DEV) return false;
       if (!supportsNativeTimeline()) return false;
       if (!paths.length) return false;
       if (!cssTiming) return false;
@@ -746,8 +754,8 @@ var SvgScrollDraw = (() => {
       if (delay > 0) return false;
       if (onProgress || onStart || onComplete || onEnter || onLeave || onEnterBack || onLeaveBack) return false;
       if (strokeColor != null || strokeWidth != null || fillOpacity != null) return false;
-      if ((trigger.start ?? "top bottom").trim() !== "top bottom") return false;
-      if ((trigger.end ?? "bottom top").trim() !== "bottom top") return false;
+      if ((trigger.start || "top bottom").trim() !== "top bottom") return false;
+      if ((trigger.end || "bottom top").trim() !== "bottom top") return false;
       return true;
     }
     function buildNative() {
@@ -842,9 +850,8 @@ var SvgScrollDraw = (() => {
          */
         refresh() {
           paths.forEach((el, i) => {
-            lengths[i] = getElementLength(el);
+            measure(el, i);
             el.style.setProperty("--ssd-len", String(lengths[i]));
-            el.style.strokeDasharray = `${lengths[i]}`;
           });
         }
       };
@@ -852,11 +859,13 @@ var SvgScrollDraw = (() => {
     if (nativeEligible()) return tracked(buildNative());
     function buildAutoplay() {
       const effectiveDuration = Math.max(1, duration);
+      const runMs = clipDirection ? effectiveDuration : effectiveDuration * (1 + Math.max(0, paths.length - 1) * stagger);
       let startTime = 0;
       let pausedElapsed = 0;
       let running = false;
       function applyAutoAlpha(elapsed) {
         let allDone = true;
+        const runRaw = Math.min(1, Math.max(0, elapsed / runMs));
         if (clipDirection) {
           const raw = Math.min(1, Math.max(0, elapsed / effectiveDuration));
           const alpha = easeFn(raw);
@@ -869,32 +878,16 @@ var SvgScrollDraw = (() => {
           paths.forEach((el, i) => {
             const staggerMs = i * stagger * effectiveDuration;
             const raw = Math.min(1, Math.max(0, (elapsed - staggerMs) / effectiveDuration));
-            const alpha = easeFn(raw);
-            el.style.strokeDashoffset = direction === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
-            if (fade) el.style.opacity = direction === "reverse" ? `${1 - alpha}` : `${alpha}`;
-            if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
-            else if (colorTo) el.style.stroke = colorTo;
-            if (widthFrom !== null && widthTo !== null)
-              el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
-            else if (widthTo !== null)
-              el.style.strokeWidth = `${widthTo}`;
-            if (fillOpacityFrom !== null && fillOpacityTo !== null)
-              el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
-            else if (fillOpacityTo !== null)
-              el.style.fillOpacity = `${fillOpacityTo}`;
-            if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
-              el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
-            if (i === 0) {
-              currentAlpha = alpha;
-              onProgress?.(alpha);
-              container.style.setProperty("--scroll-draw-progress", String(alpha));
-            }
+            paint(el, i, easeFn(raw), direction);
             if (raw < 1) allDone = false;
           });
+          const runAlpha = easeFn(runRaw);
+          currentAlpha = runAlpha;
+          onProgress?.(runAlpha);
+          container.style.setProperty("--scroll-draw-progress", String(runAlpha));
         }
         if (waypoints) {
-          const globalRaw = Math.min(1, Math.max(0, elapsed / effectiveDuration));
-          const globalAlpha = easeFn(globalRaw);
+          const globalAlpha = easeFn(runRaw);
           for (const key in waypoints) {
             const t = parseFloat(key);
             if (globalAlpha >= t && !firedWaypoints.has(t)) {
@@ -915,7 +908,7 @@ var SvgScrollDraw = (() => {
         const done = applyAutoAlpha(elapsed);
         if (done && !completed) {
           completed = true;
-          applyAutoAlpha(effectiveDuration * (1 + Math.max(0, paths.length - 1) * stagger));
+          applyAutoAlpha(runMs);
           onComplete?.();
           const maxRepeats = repeat === "infinite" ? Infinity : repeat ?? 0;
           if (repeatCount < maxRepeats) {
@@ -965,12 +958,7 @@ var SvgScrollDraw = (() => {
       let resizeTimer2;
       function onResize2() {
         clearTimeout(resizeTimer2);
-        resizeTimer2 = setTimeout(() => {
-          paths.forEach((el, i) => {
-            lengths[i] = getElementLength(el);
-            el.style.strokeDasharray = `${lengths[i]}`;
-          });
-        }, 150);
+        resizeTimer2 = setTimeout(() => paths.forEach(measure), 150);
       }
       window.addEventListener("resize", onResize2);
       window.addEventListener("orientationchange", onResize2);
@@ -1006,7 +994,7 @@ var SvgScrollDraw = (() => {
           const clamped = Math.min(1, Math.max(0, p));
           currentAlpha = clamped;
           paused = true;
-          pausedElapsed = clamped * effectiveDuration;
+          pausedElapsed = clamped * runMs;
           startTime = performance.now() - pausedElapsed;
           cancelAnimationFrame(rafId);
           applyAutoAlpha(pausedElapsed);
@@ -1017,10 +1005,7 @@ var SvgScrollDraw = (() => {
         /** No trigger window on this path — it runs on time — so lengths only. */
         refresh() {
           clearTimeout(resizeTimer2);
-          paths.forEach((el, i) => {
-            lengths[i] = getElementLength(el);
-            el.style.strokeDasharray = `${lengths[i]}`;
-          });
+          paths.forEach(measure);
         }
       };
     }
@@ -1058,11 +1043,7 @@ var SvgScrollDraw = (() => {
       }
       prevRawProgress = rawProgress;
       if (clipDirection) {
-        let alpha = easeFn(computeProgress(currentScroll, tStart, tEnd, effectiveSpeed));
-        if (once && !autoReverse) {
-          frozenAlpha = Math.max(frozenAlpha, alpha);
-          alpha = frozenAlpha;
-        }
+        const alpha = latch(0, computeProgress(currentScroll, tStart, tEnd, effectiveSpeed));
         currentAlpha = alpha;
         container.style.setProperty("--scroll-draw-progress", String(alpha));
         const visual = effectiveDir === "reverse" ? 1 - alpha : alpha;
@@ -1080,9 +1061,10 @@ var SvgScrollDraw = (() => {
             repeatCount++;
             repeatTimer = setTimeout(() => {
               frozenAlpha = -1;
+              frozenPath = [];
               started = false;
               completed = false;
-              container.style.clipPath = computeClipPath(0);
+              resetPaths();
             }, repeatDelay);
           }
         } else if (alpha < 1 && !once) {
@@ -1093,24 +1075,8 @@ var SvgScrollDraw = (() => {
       }
       paths.forEach((el, i) => {
         const offset = i * staggerFit * range;
-        let alpha = easeFn(computeProgress(currentScroll, tStart + offset, tEnd + offset, effectiveSpeed));
-        if (once && !autoReverse) {
-          alpha = frozenPath[i] = Math.max(frozenPath[i] ?? frozenAlpha, alpha);
-        }
-        el.style.strokeDashoffset = effectiveDir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
-        if (fade) el.style.opacity = effectiveDir === "reverse" ? `${1 - alpha}` : `${alpha}`;
-        if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
-        else if (colorTo) el.style.stroke = colorTo;
-        if (widthFrom !== null && widthTo !== null)
-          el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
-        else if (widthTo !== null)
-          el.style.strokeWidth = `${widthTo}`;
-        if (fillOpacityFrom !== null && fillOpacityTo !== null)
-          el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
-        else if (fillOpacityTo !== null)
-          el.style.fillOpacity = `${fillOpacityTo}`;
-        if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
-          el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
+        const alpha = latch(i, computeProgress(currentScroll, tStart + offset, tEnd + offset, effectiveSpeed));
+        paint(el, i, alpha, effectiveDir);
         if (i === 0) {
           currentAlpha = alpha;
           onProgress?.(alpha);
@@ -1190,10 +1156,7 @@ var SvgScrollDraw = (() => {
       { root: scrollEl ?? null, threshold, rootMargin }
     );
     function remeasure() {
-      paths.forEach((el, i) => {
-        lengths[i] = getElementLength(el);
-        el.style.strokeDasharray = `${lengths[i]}`;
-      });
+      paths.forEach(measure);
       cacheTriggers();
       dirty = true;
     }
@@ -1398,8 +1361,8 @@ var SvgScrollDraw = (() => {
       onLeaveBack
     } = options;
     const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS["ease-out"];
-    const startConfig = parseTrigger(trigger.start ?? "top bottom");
-    const endConfig = parseTrigger(trigger.end ?? "bottom top");
+    const startConfig = parseTrigger(trigger.start || "top bottom");
+    const endConfig = parseTrigger(trigger.end || "bottom top");
     const triggerEl = triggerElement ?? el;
     const scrollEl = typeof scrollContainer === "string" ? document.querySelector(scrollContainer) : scrollContainer ?? null;
     const entries = Object.entries(props).map(([key, val]) => ({
@@ -1436,6 +1399,14 @@ var SvgScrollDraw = (() => {
       return { ...NOOP, destroy: restoreInline, getProgress: () => 1 };
     }
     resolveFromValues();
+    const scrollPos = () => {
+      if (scrollEl) return axis === "x" ? scrollEl.scrollLeft : scrollEl.scrollTop;
+      return axis === "x" ? window.scrollX : window.scrollY;
+    };
+    const vpSize = () => {
+      if (scrollEl) return axis === "x" ? scrollEl.clientWidth : scrollEl.clientHeight;
+      return axis === "x" ? window.innerWidth : window.innerHeight;
+    };
     const cssTiming = typeof easing === "string" ? cssTimingFor(easing) : null;
     function nativeEligible() {
       if (!native) return false;
@@ -1448,8 +1419,8 @@ var SvgScrollDraw = (() => {
       if (speed !== 1) return false;
       if (onProgress || onComplete || onEnter || onLeave || onEnterBack || onLeaveBack) return false;
       if (velocityScale !== false) return false;
-      if ((trigger.start ?? "top bottom").trim() !== "top bottom") return false;
-      if ((trigger.end ?? "bottom top").trim() !== "bottom top") return false;
+      if ((trigger.start || "top bottom").trim() !== "top bottom") return false;
+      if ((trigger.end || "bottom top").trim() !== "bottom top") return false;
       for (const entry of entries) {
         if (!NATIVE_SAFE_PROPS.has(entry.prop)) return false;
       }
@@ -1464,11 +1435,9 @@ var SvgScrollDraw = (() => {
       style.textContent = `@keyframes ${cls}{from{${fromBody}}to{${toBody}}}.${cls}{animation-name:${cls};animation-duration:auto;animation-timing-function:${cssTiming};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`;
       document.head.appendChild(style);
       el.classList.add(cls);
-      const scrollPos2 = () => axis === "x" ? window.scrollX : window.scrollY;
-      const vpSize2 = () => axis === "x" ? window.innerWidth : window.innerHeight;
       const liveTriggers = () => {
         const rect = el.getBoundingClientRect();
-        return computeTriggers({ top: rect.top, height: rect.height }, scrollPos2(), vpSize2(), startConfig, endConfig);
+        return computeTriggers({ top: rect.top, height: rect.height }, scrollPos(), vpSize(), startConfig, endConfig);
       };
       _register(el, {
         type: "animate",
@@ -1506,7 +1475,7 @@ var SvgScrollDraw = (() => {
         },
         getProgress() {
           const { tStart: tStart2, tEnd: tEnd2 } = liveTriggers();
-          return easeFn(computeProgress(scrollPos2(), tStart2, tEnd2, speed));
+          return easeFn(computeProgress(scrollPos(), tStart2, tEnd2, speed));
         }
       };
       return instance;
@@ -1515,22 +1484,15 @@ var SvgScrollDraw = (() => {
     let tStart = 0;
     let tEnd = 0;
     let rafId = 0;
-    let isVisible = false;
+    let painted = NaN;
     let paused = false;
     let frozenAlpha = -1;
+    let frozenRaw = 0;
     let currentAlpha = 0;
     let completed = false;
     let prevRawProgress = NaN;
     let prevVelScroll = -1;
     let prevVelTime = 0;
-    const scrollPos = () => {
-      if (scrollEl) return axis === "x" ? scrollEl.scrollLeft : scrollEl.scrollTop;
-      return axis === "x" ? window.scrollX : window.scrollY;
-    };
-    const vpSize = () => {
-      if (scrollEl) return axis === "x" ? scrollEl.clientWidth : scrollEl.clientHeight;
-      return axis === "x" ? window.innerWidth : window.innerHeight;
-    };
     const moving = triggerEl === el ? entries : [];
     let measured = false;
     function cacheTriggers() {
@@ -1569,8 +1531,12 @@ var SvgScrollDraw = (() => {
       else if (prevRawProgress >= 1 && raw < 1) onEnterBack?.();
       prevRawProgress = raw;
     }
+    const gate = (scroll) => computeProgress(scroll, tStart, tEnd, Math.min(speed, 1));
+    function wake() {
+      if (!rafId && !paused && gate(scrollPos()) !== painted) rafId = requestAnimationFrame(update);
+    }
     function update() {
-      if (!isVisible || paused) return;
+      if (paused) return;
       const now = performance.now();
       const currentScroll = scrollPos();
       let effectiveSpeed = speed;
@@ -1584,11 +1550,8 @@ var SvgScrollDraw = (() => {
       prevVelTime = now;
       const raw = tEnd === tStart ? 0 : (currentScroll - tStart) / (tEnd - tStart);
       fireScrollCallbacks(raw);
-      let alpha = easeFn(computeProgress(currentScroll, tStart, tEnd, effectiveSpeed));
-      if (once) {
-        frozenAlpha = Math.max(frozenAlpha, alpha);
-        alpha = frozenAlpha;
-      }
+      const progress = computeProgress(currentScroll, tStart, tEnd, effectiveSpeed);
+      const alpha = once ? Math.max(frozenAlpha, easeFn(frozenRaw = Math.max(frozenRaw, progress))) : easeFn(progress);
       currentAlpha = alpha;
       applyAlpha(alpha);
       if (alpha >= 1 && !completed) {
@@ -1597,49 +1560,49 @@ var SvgScrollDraw = (() => {
       } else if (alpha < 1 && !once) {
         completed = false;
       }
-      rafId = requestAnimationFrame(update);
+      if (paused) return;
+      painted = gate(currentScroll);
+      rafId = painted > 0 && painted < 1 ? requestAnimationFrame(update) : 0;
     }
     cacheTriggers();
     if (tEnd === tStart) {
-      warn(
-        "scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",
-        el
-      );
+      warn("scrollAnimate: zero-length trigger window, so it never animates. In a sticky stage, set triggerElement.", el);
     }
     {
-      const initAlpha = easeFn(computeProgress(scrollPos(), tStart, tEnd, speed));
-      if (once && initAlpha > 0) frozenAlpha = initAlpha;
-      currentAlpha = initAlpha;
-      applyAlpha(initAlpha);
+      frozenRaw = computeProgress(scrollPos(), tStart, tEnd, speed);
+      currentAlpha = easeFn(frozenRaw);
+      applyAlpha(currentAlpha);
+    }
+    function remeasure() {
+      cacheTriggers();
+      wake();
     }
-    const observer2 = new IntersectionObserver(
-      (ioEntries) => {
-        ioEntries.forEach((e) => {
-          isVisible = e.isIntersecting;
-          if (isVisible && !paused) rafId = requestAnimationFrame(update);
-          else cancelAnimationFrame(rafId);
-        });
-      },
-      { root: scrollEl ?? null }
-    );
     let resizeTimer;
     function onResize() {
       clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(cacheTriggers, 150);
+      resizeTimer = setTimeout(remeasure, 150);
     }
+    const scroller = scrollEl ?? window;
+    scroller.addEventListener("scroll", wake, { passive: true });
     window.addEventListener("resize", onResize);
     window.addEventListener("orientationchange", onResize);
     const unwatch = watchLayout([triggerEl], onResize);
-    observer2.observe(el);
+    wake();
     _register(el, {
       type: "animate",
       getProgress: () => currentAlpha,
       getTrigger: () => ({ tStart, tEnd })
     });
+    function halt() {
+      paused = true;
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+      painted = NaN;
+    }
     return {
       destroy() {
-        cancelAnimationFrame(rafId);
-        observer2.disconnect();
+        halt();
+        scroller.removeEventListener("scroll", wake);
         window.removeEventListener("resize", onResize);
         window.removeEventListener("orientationchange", onResize);
         unwatch();
@@ -1649,34 +1612,32 @@ var SvgScrollDraw = (() => {
       },
       replay() {
         frozenAlpha = -1;
+        frozenRaw = 0;
         completed = false;
         currentAlpha = 0;
         paused = false;
         applyAlpha(0);
+        painted = 0;
+        wake();
       },
-      pause() {
-        paused = true;
-        cancelAnimationFrame(rafId);
-      },
+      pause: halt,
       resume() {
         if (!paused) return;
         paused = false;
-        if (isVisible) rafId = requestAnimationFrame(update);
+        wake();
       },
       seek(p) {
         const clamped = Math.min(1, Math.max(0, p));
         currentAlpha = clamped;
         frozenAlpha = clamped;
-        paused = true;
-        cancelAnimationFrame(rafId);
+        frozenRaw = 0;
+        halt();
         applyAlpha(clamped);
       },
       getProgress() {
         return currentAlpha;
       },
-      refresh() {
-        cacheTriggers();
-      }
+      refresh: remeasure
     };
   }
 
@@ -1766,8 +1727,8 @@ var SvgScrollDraw = (() => {
     } = options;
     const fmt = decimals !== void 0 ? (n) => n.toFixed(decimals) : format ?? ((n) => String(Math.round(n)));
     const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS["ease-out"];
-    const startConfig = parseTrigger(trigger.start ?? "top 80%");
-    const endConfig = parseTrigger(trigger.end ?? "top 20%");
+    const startConfig = parseTrigger(trigger.start || "top 80%");
+    const endConfig = parseTrigger(trigger.end || "top 20%");
     if (prefersReduced) {
       el.textContent = fmt(to);
       onComplete?.();
@@ -1780,6 +1741,7 @@ var SvgScrollDraw = (() => {
     let isVisible = false;
     let paused = false;
     let frozenAlpha = -1;
+    let frozenRaw = 0;
     let currentAlpha = 0;
     let completed = false;
     const scrollPos = () => window.scrollY;
@@ -1798,17 +1760,15 @@ var SvgScrollDraw = (() => {
       tStart = result.tStart;
       tEnd = result.tEnd;
     }
+    const savedVar = el.style.getPropertyValue("--scroll-draw-progress");
     function applyAlpha(alpha) {
       el.textContent = fmt(from + (to - from) * alpha);
       el.style.setProperty("--scroll-draw-progress", String(alpha));
     }
     function update() {
       if (!isVisible || paused) return;
-      let alpha = easeFn(computeProgress(scrollPos(), tStart, tEnd, 1));
-      if (once) {
-        frozenAlpha = Math.max(frozenAlpha, alpha);
-        alpha = frozenAlpha;
-      }
+      const progress = computeProgress(scrollPos(), tStart, tEnd, 1);
+      const alpha = once ? Math.max(frozenAlpha, easeFn(frozenRaw = Math.max(frozenRaw, progress))) : easeFn(progress);
       currentAlpha = alpha;
       applyAlpha(alpha);
       if (alpha >= 1 && !completed) {
@@ -1821,8 +1781,8 @@ var SvgScrollDraw = (() => {
     }
     cacheTriggers();
     {
-      const initAlpha = easeFn(computeProgress(scrollPos(), tStart, tEnd, 1));
-      if (once && initAlpha > 0) frozenAlpha = initAlpha;
+      frozenRaw = computeProgress(scrollPos(), tStart, tEnd, 1);
+      const initAlpha = easeFn(frozenRaw);
       currentAlpha = initAlpha;
       applyAlpha(initAlpha);
     }
@@ -1849,6 +1809,11 @@ var SvgScrollDraw = (() => {
       getProgress: () => currentAlpha,
       getTrigger: () => ({ tStart, tEnd })
     });
+    function resume() {
+      if (!paused) return;
+      paused = false;
+      if (isVisible) rafId = requestAnimationFrame(update);
+    }
     return {
       destroy() {
         cancelAnimationFrame(rafId);
@@ -1857,28 +1822,27 @@ var SvgScrollDraw = (() => {
         window.removeEventListener("orientationchange", onResize);
         unwatch();
         clearTimeout(resizeTimer);
+        el.style.setProperty("--scroll-draw-progress", savedVar);
         _unregister(el);
       },
       replay() {
         frozenAlpha = -1;
+        frozenRaw = 0;
         completed = false;
         currentAlpha = 0;
-        paused = false;
         applyAlpha(0);
+        resume();
       },
       pause() {
         paused = true;
         cancelAnimationFrame(rafId);
       },
-      resume() {
-        if (!paused) return;
-        paused = false;
-        if (isVisible) rafId = requestAnimationFrame(update);
-      },
+      resume,
       seek(p) {
         const clamped = Math.min(1, Math.max(0, p));
         currentAlpha = clamped;
         frozenAlpha = clamped;
+        frozenRaw = 0;
         paused = true;
         cancelAnimationFrame(rafId);
         applyAlpha(clamped);