svg-scroll-draw 2.23.3 → 2.23.5

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

@@ -93,7 +93,8 @@ var SvgScrollDraw = (() => {
     "ease-in": (t) => t * t,
     "ease-out": (t) => t * (2 - t),
     "ease-in-out": (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
-    spring: (t) => 1 - Math.cos(t * Math.PI * 2.5) * Math.pow(1 - t, 2.2),
+    // createSpring's defaults, the same arithmetic in the same order.
+    spring: createSpring(),
     bounce: createBounce(),
     elastic: createElastic()
   };
@@ -110,30 +111,12 @@ var SvgScrollDraw = (() => {
     const [element = "top", viewport = "bottom"] = trimmed.split(/\s+/).filter(Boolean);
     return { element, viewport };
   }
+  var anchorAt = (anchor, other) => anchor === "top" ? 0 : anchor === "center" ? 0.5 : anchor === "bottom" ? 1 : other;
   function elementAnchorY(top, height, scrollY, anchor) {
-    switch (anchor) {
-      case "top":
-        return top + scrollY;
-      case "center":
-        return top + scrollY + height / 2;
-      case "bottom":
-        return top + scrollY + height;
-      default:
-        return top + scrollY;
-    }
+    return top + scrollY + height * anchorAt(anchor, 0);
   }
   function viewportAnchorY(anchor, vpHeight) {
-    if (/^\d+(\.\d+)?%$/.test(anchor)) return vpHeight * (parseFloat(anchor) / 100);
-    switch (anchor) {
-      case "top":
-        return 0;
-      case "center":
-        return vpHeight / 2;
-      case "bottom":
-        return vpHeight;
-      default:
-        return vpHeight;
-    }
+    return vpHeight * (/^\d+(\.\d+)?%$/.test(anchor) ? parseFloat(anchor) / 100 : anchorAt(anchor, 1));
   }
   function computeProgress(scrollY, tStart, tEnd, speed) {
     if (tEnd === tStart) return 0;
@@ -162,6 +145,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");
@@ -311,6 +296,45 @@ var SvgScrollDraw = (() => {
     registry().delete(el);
   }
 
+  // src/core/motion-watch.ts
+  function watchReducedMotion(cb) {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return () => {
+      };
+    }
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e) => cb(!!e.matches);
+    if (typeof mq.addEventListener === "function") {
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }
+    const legacy = mq;
+    legacy.addListener?.(handler);
+    return () => legacy.removeListener?.(handler);
+  }
+
+  // src/core/motion-live.ts
+  function finishWhenReduced(options, build) {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return build(options, true);
+    let inst = build(options, false);
+    const unwatch = watchReducedMotion((reduced) => {
+      if (!reduced) return;
+      unwatch();
+      const finished = (inst.getProgress?.() ?? 0) >= 1;
+      inst.destroy();
+      inst = build(finished ? { ...options, onComplete: void 0 } : options, true);
+    });
+    const live = {};
+    for (const key of Object.keys(inst)) {
+      live[key] = (...args) => inst[key]?.(...args);
+    }
+    live.destroy = () => {
+      unwatch();
+      inst.destroy();
+    };
+    return live;
+  }
+
   // src/core/layout-watch.ts
   var observer;
   var watchers = /* @__PURE__ */ new Set();
@@ -364,43 +388,53 @@ var SvgScrollDraw = (() => {
     };
   }
 
-  // src/core/motion-watch.ts
-  function watchReducedMotion(cb) {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-      return () => {
-      };
-    }
-    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const handler = (e) => cb(!!e.matches);
-    if (typeof mq.addEventListener === "function") {
-      mq.addEventListener("change", handler);
-      return () => mq.removeEventListener("change", handler);
-    }
-    const legacy = mq;
-    legacy.addListener?.(handler);
-    return () => legacy.removeListener?.(handler);
-  }
-
-  // src/core/motion-live.ts
-  function finishWhenReduced(options, build) {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return build(options, true);
-    let inst = build(options, false);
-    const unwatch = watchReducedMotion((reduced) => {
-      if (!reduced) return;
-      unwatch();
-      const finished = (inst.getProgress?.() ?? 0) >= 1;
-      inst.destroy();
-      inst = build(finished ? { ...options, onComplete: void 0 } : options, true);
-    });
-    const live = {};
-    for (const key of Object.keys(inst)) {
-      live[key] = (...args) => inst[key]?.(...args);
-    }
-    live.destroy = () => {
-      unwatch();
-      inst.destroy();
+  // src/core/frame-gate.ts
+  function frameGate(scroller, watched, at, frame, measure) {
+    let raf;
+    let painted = NaN;
+    let held;
+    let timer;
+    const tick = () => {
+      raf = 0;
+      frame();
+      if (!held && !raf && (painted = at()) > 0 && painted < 1) raf = requestAnimationFrame(tick);
+    };
+    const wake = () => {
+      if (!raf && !held && at() !== painted) raf = requestAnimationFrame(tick);
+    };
+    const hold = (on) => {
+      held = on;
+      cancelAnimationFrame(raf);
+      raf = painted = NaN;
+      wake();
+    };
+    const remeasure = () => {
+      clearTimeout(timer);
+      measure();
+      wake();
+    };
+    const later = () => {
+      clearTimeout(timer);
+      timer = setTimeout(remeasure, 150);
+    };
+    const unwatch = watchLayout(watched, later);
+    const listen = (method) => {
+      scroller[method]("scroll", wake, { passive: true });
+      window[method]("resize", later);
+      window[method]("orientationchange", later);
+    };
+    listen("addEventListener");
+    wake();
+    return {
+      hold,
+      remeasure,
+      off() {
+        hold(true);
+        listen("removeEventListener");
+        unwatch();
+        clearTimeout(timer);
+      }
     };
-    return live;
   }
 
   // src/core/engine.ts
@@ -566,11 +600,11 @@ var SvgScrollDraw = (() => {
     let tStart = 0;
     let tEnd = 0;
     let staggerFit = stagger;
-    let tLast = 0;
+    let gStart = 0;
+    let gEnd = 0;
     let completed = false;
     let started = false;
     let rafId = 0;
-    let isVisible = false;
     let frozenAlpha = -1;
     let frozenPath = [];
     let prevScroll = -1;
@@ -578,6 +612,7 @@ var SvgScrollDraw = (() => {
     let currentAlpha = 0;
     let repeatCount = 0;
     let repeatTimer;
+    let parked = false;
     let debugOverlay = null;
     function destroyDebugOverlay() {
       debugOverlay?.destroy();
@@ -611,7 +646,10 @@ var SvgScrollDraw = (() => {
         const room = s[`scroll${d}`] - s[`client${d}`] - 1 - tStart - range / speed;
         if (room >= 0) staggerFit = Math.min(stagger, room / (gaps * range));
       }
-      tLast = tEnd + gaps * staggerFit * range;
+      const span = Math.max(0, gaps) * staggerFit * range;
+      const len = range / Math.min(speed, 1);
+      gStart = tStart + Math.min(0, span, len, span + len);
+      gEnd = tStart + Math.max(0, span, len, span + len);
     }
     function cacheTriggers() {
       ({ tStart, tEnd } = measureTriggers());
@@ -676,13 +714,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);
@@ -691,7 +742,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;
@@ -699,7 +749,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 = "";
@@ -723,7 +772,7 @@ var SvgScrollDraw = (() => {
     function nativeEligible() {
       if (native === false) return false;
       if (autoplay) return false;
-      if (debug) return false;
+      if (debug && IS_DEV) return false;
       if (!supportsNativeTimeline()) return false;
       if (!paths.length) return false;
       if (!cssTiming) return false;
@@ -837,9 +886,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]}`;
           });
         }
       };
@@ -929,7 +977,7 @@ var SvgScrollDraw = (() => {
         resetPaths();
         rafId = requestAnimationFrame(tick);
       }
-      const observer3 = new IntersectionObserver(
+      const observer2 = new IntersectionObserver(
         (entries) => {
           entries.forEach((e) => {
             if (e.isIntersecting && !(once && completed)) {
@@ -943,28 +991,23 @@ var SvgScrollDraw = (() => {
         },
         { root: scrollEl ?? null, threshold, rootMargin }
       );
-      let resizeTimer2;
-      function onResize2() {
-        clearTimeout(resizeTimer2);
-        resizeTimer2 = setTimeout(() => {
-          paths.forEach((el, i) => {
-            lengths[i] = getElementLength(el);
-            el.style.strokeDasharray = `${lengths[i]}`;
-          });
-        }, 150);
+      let resizeTimer;
+      function onResize() {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => paths.forEach(measure), 150);
       }
-      window.addEventListener("resize", onResize2);
-      window.addEventListener("orientationchange", onResize2);
-      if (delay > 0) setTimeout(() => observer3.observe(container), delay);
-      else observer3.observe(container);
+      window.addEventListener("resize", onResize);
+      window.addEventListener("orientationchange", onResize);
+      if (delay > 0) setTimeout(() => observer2.observe(container), delay);
+      else observer2.observe(container);
       return {
         destroy() {
           cancelAnimationFrame(rafId);
           clearTimeout(repeatTimer);
-          observer3.disconnect();
-          window.removeEventListener("resize", onResize2);
-          window.removeEventListener("orientationchange", onResize2);
-          clearTimeout(resizeTimer2);
+          observer2.disconnect();
+          window.removeEventListener("resize", onResize);
+          window.removeEventListener("orientationchange", onResize);
+          clearTimeout(resizeTimer);
         },
         replay() {
           repeatCount = 0;
@@ -997,24 +1040,39 @@ 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]}`;
-          });
+          clearTimeout(resizeTimer);
+          paths.forEach(measure);
         }
       };
     }
     if (autoplay) return tracked(buildAutoplay());
     cacheTriggers();
+    const at = () => computeProgress(scrollPos(), gStart, gEnd, 1);
+    function complete() {
+      completed = true;
+      onComplete?.();
+      if (repeatCount < (repeat === "infinite" ? Infinity : repeat)) {
+        repeatCount++;
+        repeatTimer = setTimeout(() => {
+          parked = true;
+        }, repeatDelay);
+      }
+    }
+    function restart() {
+      frozenAlpha = -1;
+      frozenPath = [];
+      started = false;
+      completed = false;
+      parked = false;
+      firedWaypoints.clear();
+      resetPaths();
+      dirty = true;
+    }
     function update() {
-      if (paused || !looping) return;
       const now = performance.now();
       const currentScroll = scrollPos();
-      if (!dirty && velocityScale === false && currentScroll === lastAppliedScroll) {
-        next(currentScroll);
-        return;
-      }
+      if (parked && at() % 1) restart();
+      if (!dirty && velocityScale === false && currentScroll === lastAppliedScroll) return;
       dirty = false;
       lastAppliedScroll = currentScroll;
       let effectiveSpeed = speed;
@@ -1033,9 +1091,9 @@ var SvgScrollDraw = (() => {
       const rawProgress = range === 0 ? 0 : (currentScroll - tStart) / range;
       if (!isNaN(prevRawProgress)) {
         if (prevRawProgress <= 0 && rawProgress > 0) onEnter?.();
-        else if (prevRawProgress > 0 && rawProgress <= 0) onLeaveBack?.();
         if (prevRawProgress < 1 && rawProgress >= 1) onLeave?.();
-        else if (prevRawProgress >= 1 && rawProgress < 1) onEnterBack?.();
+        if (prevRawProgress >= 1 && rawProgress < 1) onEnterBack?.();
+        if (prevRawProgress > 0 && rawProgress <= 0) onLeaveBack?.();
       }
       prevRawProgress = rawProgress;
       if (clipDirection) {
@@ -1050,23 +1108,10 @@ var SvgScrollDraw = (() => {
           onStart?.();
         }
         if (alpha >= 1 && !completed) {
-          completed = true;
-          onComplete?.();
-          const maxRepeats = repeat === "infinite" ? Infinity : repeat ?? 0;
-          if (repeatCount < maxRepeats) {
-            repeatCount++;
-            repeatTimer = setTimeout(() => {
-              frozenAlpha = -1;
-              frozenPath = [];
-              started = false;
-              completed = false;
-              resetPaths();
-            }, repeatDelay);
-          }
+          complete();
         } else if (alpha < 1 && !once) {
           completed = false;
         }
-        next(currentScroll);
         return;
       }
       paths.forEach((el, i) => {
@@ -1095,117 +1140,60 @@ var SvgScrollDraw = (() => {
         onStart?.();
       }
       if (allComplete && !completed) {
-        completed = true;
-        onComplete?.();
-        const maxRepeats = repeat === "infinite" ? Infinity : repeat ?? 0;
-        if (repeatCount < maxRepeats) {
-          repeatCount++;
-          repeatTimer = setTimeout(() => {
-            frozenAlpha = -1;
-            frozenPath = [];
-            started = false;
-            completed = false;
-            firedWaypoints.clear();
-            resetPaths();
-            dirty = true;
-          }, repeatDelay);
-        }
+        complete();
       } else if (!allComplete && !once) {
         completed = false;
       }
-      next(currentScroll);
     }
-    function inStaggerTail(scroll) {
-      return scroll >= tEnd && scroll < tLast;
-    }
-    function next(scroll) {
-      if (isVisible || inStaggerTail(scroll)) rafId = requestAnimationFrame(update);
-      else looping = false;
-    }
-    function live() {
-      return isVisible || inStaggerTail(scrollPos());
-    }
-    let looping = false;
-    function startLoop() {
-      if (looping) return;
-      looping = true;
-      rafId = requestAnimationFrame(function frame() {
-        update();
-      });
-    }
-    function stopLoop() {
-      looping = false;
-      cancelAnimationFrame(rafId);
-    }
-    const observer2 = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((e) => {
-          isVisible = e.isIntersecting;
-          if (isVisible && !paused) {
-            dirty = true;
-            startLoop();
-          } else if (!(looping && !paused && inStaggerTail(scrollPos()))) {
-            stopLoop();
-          }
-        });
-      },
-      { root: scrollEl ?? null, threshold, rootMargin }
+    const gate = frameGate(
+      scrollEl ?? window,
+      [container],
+      at,
+      update,
+      () => {
+        const before = lengths.join();
+        paths.forEach(measure);
+        cacheTriggers();
+        dirty = true;
+        if (lengths.join() !== before) go();
+      }
     );
-    function remeasure() {
-      paths.forEach((el, i) => {
-        lengths[i] = getElementLength(el);
-        el.style.strokeDasharray = `${lengths[i]}`;
-      });
-      cacheTriggers();
-      dirty = true;
-    }
-    let resizeTimer;
-    function onResize() {
-      clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(remeasure, 150);
-    }
-    window.addEventListener("resize", onResize);
-    window.addEventListener("orientationchange", onResize);
-    const unwatch = watchLayout([container], onResize);
-    if (delay > 0) setTimeout(() => observer2.observe(container), delay);
-    else observer2.observe(container);
+    let waiting = delay > 0;
+    function go() {
+      gate.hold(paused || waiting);
+    }
+    let delayTimer;
+    if (waiting) delayTimer = setTimeout(() => {
+      waiting = false;
+      go();
+    }, delay);
+    go();
     return tracked({
       destroy() {
-        cancelAnimationFrame(rafId);
         clearTimeout(repeatTimer);
-        stopLoop();
-        observer2.disconnect();
-        unwatch();
-        window.removeEventListener("resize", onResize);
-        window.removeEventListener("orientationchange", onResize);
-        clearTimeout(resizeTimer);
+        clearTimeout(delayTimer);
+        gate.off();
         destroyDebugOverlay();
       },
       replay() {
-        frozenAlpha = -1;
-        frozenPath = [];
+        restart();
         prevScroll = -1;
         prevVelScroll = -1;
-        started = false;
-        completed = false;
         repeatCount = 0;
         paused = false;
         currentAlpha = 0;
-        firedWaypoints.clear();
         clearTimeout(repeatTimer);
-        resetPaths();
-        dirty = true;
-        if (live()) startLoop();
+        go();
       },
       pause() {
         paused = true;
-        stopLoop();
+        gate.hold(true);
       },
       resume() {
         if (!paused) return;
         paused = false;
         dirty = true;
-        if (live()) startLoop();
+        go();
       },
       seek(progress) {
         const p = Math.min(1, Math.max(0, progress));
@@ -1213,7 +1201,7 @@ var SvgScrollDraw = (() => {
         frozenAlpha = p;
         frozenPath = [];
         paused = true;
-        stopLoop();
+        gate.hold(true);
         applyAlpha(p, direction);
         dirty = true;
       },
@@ -1227,11 +1215,7 @@ var SvgScrollDraw = (() => {
        * window — run immediately and marked dirty so the next frame repaints from
        * the new numbers.
        */
-      refresh() {
-        clearTimeout(resizeTimer);
-        remeasure();
-        if (live() && !paused) startLoop();
-      }
+      refresh: gate.remeasure
     }, () => ({ tStart, tEnd }));
   }
 
@@ -1482,8 +1466,6 @@ var SvgScrollDraw = (() => {
     if (nativeEligible()) return buildNative();
     let tStart = 0;
     let tEnd = 0;
-    let rafId = 0;
-    let isVisible = false;
     let paused = false;
     let frozenAlpha = -1;
     let frozenRaw = 0;
@@ -1525,13 +1507,13 @@ var SvgScrollDraw = (() => {
         return;
       }
       if (prevRawProgress <= 0 && raw > 0) onEnter?.();
-      else if (prevRawProgress > 0 && raw <= 0) onLeaveBack?.();
       if (prevRawProgress < 1 && raw >= 1) onLeave?.();
-      else if (prevRawProgress >= 1 && raw < 1) onEnterBack?.();
+      if (prevRawProgress >= 1 && raw < 1) onEnterBack?.();
+      if (prevRawProgress > 0 && raw <= 0) onLeaveBack?.();
       prevRawProgress = raw;
     }
     function update() {
-      if (!isVisible || paused) return;
+      if (paused) return;
       const now = performance.now();
       const currentScroll = scrollPos();
       let effectiveSpeed = speed;
@@ -1555,52 +1537,36 @@ var SvgScrollDraw = (() => {
       } else if (alpha < 1 && !once) {
         completed = false;
       }
-      rafId = requestAnimationFrame(update);
     }
+    const gate = frameGate(
+      scrollEl ?? window,
+      [triggerEl],
+      () => computeProgress(scrollPos(), tStart, tEnd, Math.min(speed, 1)),
+      update,
+      cacheTriggers
+    );
     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);
     }
     {
       frozenRaw = computeProgress(scrollPos(), tStart, tEnd, speed);
       currentAlpha = easeFn(frozenRaw);
       applyAlpha(currentAlpha);
     }
-    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);
-    }
-    window.addEventListener("resize", onResize);
-    window.addEventListener("orientationchange", onResize);
-    const unwatch = watchLayout([triggerEl], onResize);
-    observer2.observe(el);
     _register(el, {
       type: "animate",
       getProgress: () => currentAlpha,
       getTrigger: () => ({ tStart, tEnd })
     });
+    function halt() {
+      paused = true;
+      gate.hold(true);
+    }
     return {
       destroy() {
-        cancelAnimationFrame(rafId);
-        observer2.disconnect();
-        window.removeEventListener("resize", onResize);
-        window.removeEventListener("orientationchange", onResize);
-        unwatch();
-        clearTimeout(resizeTimer);
+        paused = true;
+        gate.off();
         restoreInline();
         _unregister(el);
       },
@@ -1611,31 +1577,26 @@ var SvgScrollDraw = (() => {
         currentAlpha = 0;
         paused = false;
         applyAlpha(0);
+        gate.hold(false);
       },
-      pause() {
-        paused = true;
-        cancelAnimationFrame(rafId);
-      },
+      pause: halt,
       resume() {
         if (!paused) return;
         paused = false;
-        if (isVisible) rafId = requestAnimationFrame(update);
+        gate.hold(false);
       },
       seek(p) {
         const clamped = Math.min(1, Math.max(0, p));
         currentAlpha = clamped;
         frozenAlpha = clamped;
         frozenRaw = 0;
-        paused = true;
-        cancelAnimationFrame(rafId);
+        halt();
         applyAlpha(clamped);
       },
       getProgress() {
         return currentAlpha;
       },
-      refresh() {
-        cacheTriggers();
-      }
+      refresh: gate.remeasure
     };
   }
 
@@ -1735,9 +1696,6 @@ var SvgScrollDraw = (() => {
     let tStart = 0;
     let tEnd = 0;
     let measured = false;
-    let rafId = 0;
-    let isVisible = false;
-    let paused = false;
     let frozenAlpha = -1;
     let frozenRaw = 0;
     let currentAlpha = 0;
@@ -1758,13 +1716,14 @@ 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));
     }
+    const at = () => computeProgress(scrollPos(), tStart, tEnd, 1);
     function update() {
-      if (!isVisible || paused) return;
-      const progress = computeProgress(scrollPos(), tStart, tEnd, 1);
+      const progress = at();
       const alpha = once ? Math.max(frozenAlpha, easeFn(frozenRaw = Math.max(frozenRaw, progress))) : easeFn(progress);
       currentAlpha = alpha;
       applyAlpha(alpha);
@@ -1774,7 +1733,6 @@ var SvgScrollDraw = (() => {
       } else if (alpha < 1 && !once) {
         completed = false;
       }
-      rafId = requestAnimationFrame(update);
     }
     cacheTriggers();
     {
@@ -1783,37 +1741,17 @@ var SvgScrollDraw = (() => {
       currentAlpha = initAlpha;
       applyAlpha(initAlpha);
     }
-    const observer2 = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((e) => {
-          isVisible = e.isIntersecting;
-          if (isVisible && !paused) rafId = requestAnimationFrame(update);
-          else cancelAnimationFrame(rafId);
-        });
-      }
-    );
-    let resizeTimer;
-    function onResize() {
-      clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(cacheTriggers, 150);
-    }
-    window.addEventListener("resize", onResize);
-    window.addEventListener("orientationchange", onResize);
-    const unwatch = watchLayout([el], onResize);
-    observer2.observe(el);
+    const gate = frameGate(window, [el], at, update, cacheTriggers);
     _register(el, {
       type: "counter",
       getProgress: () => currentAlpha,
       getTrigger: () => ({ tStart, tEnd })
     });
+    const resume = () => gate.hold(false);
     return {
       destroy() {
-        cancelAnimationFrame(rafId);
-        observer2.disconnect();
-        window.removeEventListener("resize", onResize);
-        window.removeEventListener("orientationchange", onResize);
-        unwatch();
-        clearTimeout(resizeTimer);
+        gate.off();
+        el.style.setProperty("--scroll-draw-progress", savedVar);
         _unregister(el);
       },
       replay() {
@@ -1821,25 +1759,17 @@ var SvgScrollDraw = (() => {
         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);
-      },
+      pause: () => gate.hold(true),
+      resume,
       seek(p) {
         const clamped = Math.min(1, Math.max(0, p));
         currentAlpha = clamped;
         frozenAlpha = clamped;
         frozenRaw = 0;
-        paused = true;
-        cancelAnimationFrame(rafId);
+        gate.hold(true);
         applyAlpha(clamped);
       },
       getProgress() {