Animation Map Sampling

1/**
2 * Seek and measure every sample for one tween inside a single browser
3 * evaluation. GSAP/HyperFrames seeks update DOM state synchronously, so a
4 * separate CDP round trip and wall-clock sleep per sample only adds latency.
5 */
6export async function sampleTweenBboxes(page, selector, times) {
7  return page.evaluate(
8    ({ selector: sel, times: sampleTimes }) => {
9      const seek = (time) => {
10        if (window.__hf && typeof window.__hf.seek === "function") {
11          window.__hf.seek(time);
12          return;
13        }
14        const timelines = window.__timelines;
15        if (!timelines) return;
16        for (const timeline of Object.values(timelines)) {
17          if (typeof timeline.seek === "function") timeline.seek(time);
18        }
19      };
20
21      return sampleTimes.map((time) => {
22        seek(time);
23        const el = document.querySelector(sel);
24        if (!el) return { t: time, x: 0, y: 0, w: 0, h: 0, missing: true };
25        const rect = el.getBoundingClientRect();
26        const style = getComputedStyle(el);
27        return {
28          t: time,
29          x: Math.round(rect.x),
30          y: Math.round(rect.y),
31          w: Math.round(rect.width),
32          h: Math.round(rect.height),
33          opacity: parseFloat(style.opacity),
34          visible: style.visibility !== "hidden" && style.display !== "none",
35        };
36      });
37    },
38    { selector, times },
39  );
40}