@mehshekari/gsap-motion 4.2.1 → 4.4.2

package/skill/reference/refine.md

@@ -75,6 +75,31 @@ Reach the state first, and change the conditions that usually break things:
 - `--reduced`, `--dark`, `--mobile`, `--cpu 4`. `--mobile` makes input touch,
   so it cannot be combined with `--hover`: a coarse pointer has no hover, which
   is the thing worth knowing.
+- **Cost on a production build, not the dev server.** In development React's
+  StrictMode mounts every effect twice — two contexts, two WebGL contexts — and
+  the bundle is unminified, so what a dev server measures is not what ships.
+  Motion and timing can be watched on either.
+- `--headed` for anything WebGL. Headless Chrome draws in software — on one
+  Windows machine, the Basic Render Driver headless and the Intel GPU headed —
+  so a 3D scene's frames, rate and long frames describe the wrong thing. A
+  report warns when the page has a canvas and the run was headless. The DOM's
+  layout and style numbers do not depend on it.
+- `--seek <name>` for a moment too short or too far into the timeline for the
+  clock to land on. `--at` then means seconds of the timeline: before each
+  capture it calls `window.<name>(t)` and waits two rendered frames. A bundle
+  never exposes `gsap`, so the page has to export the function — in
+  development only, removed with the context:
+
+```ts
+if (process.env.NODE_ENV !== "production") {
+  Object.assign(window, { __seek: (t: number) => tl.pause(t) });
+  // and in the cleanup: Reflect.deleteProperty(window, "__seek");
+}
+```
+
+  Against a production build it is missing, and the run says so rather than
+  capturing the wrong frames. Through an MCP browser, call it from
+  `evaluate_script` instead.
 
 **Without a browser, report the stage as not run.** Not "fine".
 
@@ -99,6 +124,8 @@ that no source rule can reach.
 | **X% of the screen in motion** | Everything moving at once reads as noise, not as choreography. |
 | **seams** | A step far larger than that motion's own rhythm: a loop put back by hand instead of carried. |
 | **motion over text** | Something painted over a line a reader is in the middle of. Hit-tested, so it is what is really on top. |
+| **frames over 50ms** | Long Animation Frames, with the sampler's own time taken out of each: the rest is the page's. "Not measured" means the browser has no such API, not that nothing was long. |
+| **layout shift** | The browser's own shift total, input excluded. Sampling reads layout but never moves it, so this is the page's alone — a pin swapping its position at a section edge shows here. |
 
 Three things it deliberately does not do, so you do not read them into it:
 
@@ -113,6 +140,33 @@ Three things it deliberately does not do, so you do not read them into it:
 A clean report is evidence, not proof: it watched one window, on one machine, at
 one size. Say which.
 
+## In a browser you already drive
+
+Both scripts open a Chrome of their own. Where a project allows only one — a
+DevTools MCP server, say — they print what they would have run instead, and
+open nothing:
+
+```bash
+node <skill-dir>/scripts/review-motion.mjs --probe install   # start recording
+node <skill-dir>/scripts/review-motion.mjs --probe read      # the findings
+node <skill-dir>/scripts/capture-motion.mjs --probe timeline # the running timeline
+```
+
+Each prints one function. Run `install` through the tool's `evaluate_script`,
+then reach the state — scroll, hover, wait — with that tool's own input, and
+then `read`. It returns what `review --json` would: the same conclusions,
+computed in the page, so the frame log never leaves it.
+
+What changes, so the report says it:
+
+- **First motion counts from `install`**, not from navigation. A reload discards
+  the recorder; install again after one.
+- **Emulation is the driving tool's**: its CPU throttling, viewport and
+  media features, set before `install`.
+- **No layout or style counts.** Those come from the DevTools protocol, which a
+  page cannot reach — read them from the tool's own performance trace. Long
+  frames and layout shifts are observed in the page, so `read` has them.
+
 ## When to stop
 
 Stop when every check is clean, or after **three rounds**, reporting what is

package/skill/reference/routing.md

@@ -54,6 +54,15 @@ two is not a coin toss.
 | "it feels cheap" | linear easing, or one uniform duration | `tune` |
 | "it feels slow" | usually too sequential, not too long: try overlap | `tune` |
 
+### "Match this site, one to one"
+
+The reference is the precedent, and its motion is the spec. Measure its curves
+and durations from it — `inspect` on its URL with a dense `--at`, or a
+recording frame by frame — and copy them exactly. "Motion carries meaning or it
+goes" judged the reference when it was designed; applied to the copy, it
+simplifies what was asked for verbatim. Personalising is a second pass, after
+the copy matches.
+
 ### "Something crazy"
 
 A fade-and-scale is a failure of nerve; twelve techniques at once is a failure
@@ -87,7 +96,8 @@ single hover takes [interaction](interaction.md) and nothing else from its row.
 | Request | Add |
 |---|---|
 | SVG draw / morph / path | [svg](svg.md), [timeline](timeline.md) |
-| Scroll sequence, pin, scrub | [scrolltrigger](scrolltrigger.md), [timeline](timeline.md), [performance](performance.md) |
+| Scroll sequence, pin, scrub | [scrolltrigger](scrolltrigger.md), [timeline](timeline.md), [performance](performance.md), [scroll-storytelling](../preset/scroll-storytelling.md) |
+| Smooth scroll, Lenis | [scrolltrigger](scrolltrigger.md#lenis), [devices](devices.md) |
 | Horizontal scroll | [scrolltrigger](scrolltrigger.md), [scroll-storytelling](../preset/scroll-storytelling.md) |
 | Text reveal, kinetic type | [text](text.md), [timeline](timeline.md) |
 | Magnetic, cursor, hover | [interaction](interaction.md), [performance](performance.md) |

package/skill/reference/scrolltrigger.md

@@ -97,6 +97,39 @@ Things that bite:
 - `position: sticky` is cheaper and needs no plugin. Use it when you only need
   the element to stay put, not to drive a timeline.
 
+### `pinType`
+
+How the pin holds the element. On the window it defaults to `"fixed"`: at each
+enter and leave, ScrollTrigger swaps the element's whole state — `position`,
+`top`, `left`, `width`, `height`, margins, padding — and the browser lays it out
+again in that frame. `"transform"` swaps nothing, and writes a translate every
+frame while the pin is active (verified against gsap 3.15).
+
+`"fixed"` is the default because native scrolling runs off the main thread, and
+a translate written once per frame would trail it. Under Lenis that reason is
+gone for the wheel — the scroll moves in the same frame as the pin — and the
+state swap at every section edge is what remains. On one landing page it was
+measured at a CLS of 4 to 7.5 and frames of 50 to 117ms per edge, and
+`"transform"` removed both. Touch is still native under Lenis, so keep
+`"fixed"` there:
+
+```ts
+// Inside the component's context, so it reverts with it. Both conditions are
+// named: a matchMedia callback runs only while one of them matches.
+gsap.matchMedia().add({ smoothed: "(pointer: fine)", touch: "(pointer: coarse)" }, (context) => {
+  const { smoothed } = context.conditions;
+  ScrollTrigger.create({ trigger: section, pin: true, pinType: smoothed ? "transform" : "fixed" });
+});
+```
+
+A trackpad sends wheel events, so a laptop is smoothed too. A laptop with a
+touch screen still reads `(pointer: fine)`, and scrolled by finger its pin
+trails the native scroll. If that audience matters, branch on
+`(any-pointer: coarse)` instead: every device with touch gets `"fixed"`, and
+with it the cost at each edge.
+
+Without smooth scrolling, leave the default.
+
 ## Horizontal scroll
 
 A vertical scroll driving a horizontal translation. `xPercent` avoids measuring:
@@ -162,6 +195,49 @@ interferes with `position: fixed`, anchor links, and native scroll on some
 touch devices. Do not add it to make a reveal smoother — fix the reveal. Add it
 only when the whole page is designed around smoothed scrolling.
 
+## Lenis
+
+Lenis smooths wheel input and writes the result to the real scroll position, so
+ScrollTrigger needs no `scrollerProxy`. Pins need one decision, in
+[`pinType`](#pintype). What it needs above all is **one clock**, shared with
+GSAP:
+
+```ts
+const lenis = new Lenis();                         // autoRaf stays false, its default
+lenis.on("scroll", ScrollTrigger.update);          // triggers read this frame's scroll
+const raf = (time: number) => lenis.raf(time * 1000); // the ticker's time is seconds
+gsap.ticker.add(raf, false, true);                 // prioritized: before GSAP renders
+gsap.ticker.lagSmoothing(0);
+
+// Teardown. A context owns neither of these.
+gsap.ticker.remove(raf);
+lenis.destroy();
+```
+
+- **Prioritized, because GSAP renders in its own first ticker listener.** Added
+  after it, Lenis moves the scroll once GSAP has drawn the frame: a numeric
+  `scrub` — a tween — and anything tweened from the scroll position render one
+  frame late. `scrub: true` sets progress directly and is not affected.
+- **Never `autoRaf: true` as well.** Lenis steps by the difference between
+  consecutive `raf` calls, and the two loops pass clocks with different origins,
+  so the step swings and the scroll stutters.
+- **`lagSmoothing(0)`**: after a frame longer than 500ms, GSAP otherwise
+  advances its clock by 33ms, and Lenis on that clock crawls back to the
+  scroll. It applies to every tween on the page, which then jump after a long
+  frame instead of slowing.
+- **Touch is native by default.** With `syncTouch` off, Lenis smooths nothing on
+  a touch screen and only runs its loop. Leave it off — it takes over the
+  platform's momentum, and is unstable on older iOS — and consider not creating
+  Lenis at all without a fine pointer; see [devices.md](devices.md).
+- **Reduced motion is handled.** By default Lenis tracks the input 1:1 and makes
+  programmatic scrolls instant, and keeps running. Do not destroy it for reduced
+  motion: the ScrollTrigger sync above depends on it.
+- In-page links need `anchors: true`; a nested scroll container needs
+  `data-lenis-prevent`. In React, `ReactLenis` from `lenis/react` takes the same
+  options: `autoRaf: false`, and the ticker wiring in an effect.
+
+Verified against `lenis@1.3` and `gsap@3.15`.
+
 ## React
 
 The lifecycle is the hard part. `useGSAP` reverts its context on unmount, which
@@ -189,3 +265,6 @@ images settle. `ScrollTrigger.refresh()` on mount is usually needed. See
 | Janky while scrolling | layout-triggering properties — see [performance](performance.md) |
 | Works, then breaks after navigation | ScrollTriggers not killed on unmount |
 | Wrong on mobile after address-bar hide | viewport resize — `invalidateOnRefresh` |
+| Smooth scroll stutters | Lenis on two loops — `autoRaf` and the ticker |
+| A numeric scrub trails the scroll by a frame | Lenis's `raf` added to the ticker without `prioritize` |
+| A layout shift and a long frame at each pinned section's edge | a `"fixed"` pin under Lenis — `pinType: "transform"` for the wheel |

package/skill/scripts/audit-gsap.mjs

@@ -151,6 +151,10 @@ if (asJson) {
     .join(", ");
 
   console.log(`\n${tally}`);
+  /** Said here because a report that never mentions it reads as "there is no way". */
+  console.log(
+    "A deliberate finding is waived with `<rule-id>-ok` and a reason, on its line or in the eight above.",
+  );
 }
 
 process.exit(findings.some((f) => f.level === "error") ? 1 : 0);

package/skill/scripts/capture-motion.mjs

@@ -29,6 +29,12 @@
  *   --cpu 4               throttle the CPU by this factor
  *   --json                machine-readable, for scripts
  *   --chrome <path>       a browser to use, overriding the search
+ *   --seek <name>         call window.<name>(t) before each capture, and read
+ *                         --at as seconds of the timeline instead of the clock
+ *   --headed              a visible Chrome, on the machine's GPU: what a WebGL
+ *                         page needs for its frames and rate to mean anything
+ *   --probe timeline      print the timeline reader as a function, for a
+ *                         browser you already drive, and open none
  *
  * `--scroll`, `--hover` and `--click` run in the order they are written, before
  * the first capture. An animation that needs a pointer or a scroll position is
@@ -40,7 +46,7 @@
 import { spawn } from "node:child_process";
 import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { homedir, tmpdir } from "node:os";
-import { join, resolve } from "node:path";
+import { join, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 
 // --- The browser -------------------------------------------------------------
@@ -85,11 +91,20 @@ export function connect(executable, { headless = true } = {}) {
   const chrome = spawn(
     executable,
     [
-      ...(headless ? ["--headless=new"] : []),
+      /** Headless runs without a GPU, for a steady result; headed gets the machine's own. */
+      ...(headless ? ["--headless=new", "--disable-gpu"] : []),
       "--remote-debugging-pipe",
+      /**
+       * A window nobody can see is a page Chrome stops animating: headed and
+       * moved off-screen, as a window behind an editor is, rAF went from 122 a
+       * second to none, and the run hung. With these it ran at 166. They are
+       * Puppeteer's defaults too.
+       */
+      "--disable-backgrounding-occluded-windows",
+      "--disable-renderer-backgrounding",
+      "--disable-background-timer-throttling",
       "--no-first-run",
       "--no-default-browser-check",
-      "--disable-gpu",
       "--disable-extensions",
       `--user-data-dir=${profile}`,
       "about:blank",
@@ -176,6 +191,10 @@ export function parseOptions(argv) {
     cpu: 1,
     json: false,
     chrome: null,
+    headed: false,
+    seek: null,
+    atGiven: false,
+    probe: null,
     errors: [],
   };
 
@@ -192,6 +211,7 @@ export function parseOptions(argv) {
           options.errors.push("--at takes milliseconds, such as --at 0,300,900");
         } else {
           options.at = times.sort((a, b) => a - b);
+          options.atGiven = true;
         }
         break;
       }
@@ -234,6 +254,20 @@ export function parseOptions(argv) {
       case "--chrome":
         options.chrome = value() ?? null;
         break;
+      case "--headed":
+        options.headed = true;
+        break;
+      case "--seek": {
+        /** A name the page exports, never an expression: it is spliced into the page's code. */
+        const name = value() ?? "";
+        if (/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(name)) options.seek = name;
+        else options.errors.push("--seek takes the name of a function on window, such as --seek __seek");
+        break;
+      }
+      case "--probe":
+        if (value() === "timeline") options.probe = "timeline";
+        else options.errors.push("--probe takes timeline");
+        break;
       default:
         if (argument.startsWith("--")) options.errors.push(`Unknown option: ${argument}`);
         else if (options.url === null) options.url = argument;
@@ -241,7 +275,15 @@ export function parseOptions(argv) {
     }
   }
 
-  if (options.url === null) options.errors.push("No URL. Pass the page to watch.");
+  /** A probe is printed, not run, so it needs no page. */
+  if (options.url === null && options.probe === null) {
+    options.errors.push("No URL. Pass the page to watch.");
+  }
+
+  /** Seeking makes `--at` timeline seconds, so the millisecond default would mean minutes. */
+  if (options.seek && !options.atGiven) {
+    options.errors.push("--seek needs --at, in seconds of the timeline, such as --at 3,3.3,3.6");
+  }
 
   /** A coarse pointer has no hover; emulating both would measure something no device is. */
   if (options.mobile && options.steps.some((step) => step.type === "hover")) {
@@ -325,6 +367,21 @@ const COUNT_FRAMES = `(() => {
   return true;
 })()`;
 
+/**
+ * The timeline reader as a function, for a browser something else already
+ * holds — a DevTools MCP server's `evaluate_script`. Layouts and style
+ * recalculations come from the DevTools protocol, which a page cannot reach, so
+ * they are not part of it.
+ */
+export const probe = () => `() => ${READ_TIMELINE}`;
+
+/** Two rendered frames: a seek has been applied and painted once this resolves. */
+const SETTLED = "new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(() => done(true))))";
+
+/** A frame's file name: milliseconds of the clock, or seconds of the timeline when seeking. */
+export const frameName = (at, options) =>
+  options.seek ? `frame-${at.toFixed(3).padStart(8, "0")}s.png` : `frame-${String(at).padStart(5, "0")}ms.png`;
+
 /** The live box of a selector, so a pointer lands on an element that is moving. */
 const boxOf = (selector) => `(() => {
   const element = document.querySelector(${JSON.stringify(selector)});
@@ -333,6 +390,39 @@ const boxOf = (selector) => `(() => {
   return { x: box.x + box.width / 2, y: box.y + box.height / 2, width: box.width, height: box.height };
 })()`;
 
+// --- Where output goes -------------------------------------------------------
+
+/**
+ * What a report says when the page has a canvas and Chrome ran without its GPU:
+ * a WebGL scene was then drawn in software, and its frames, rate and long frames
+ * describe that, not the visitor's machine. Null when there is nothing to say.
+ */
+export function gpuNote(canvases, options) {
+  if (!canvases || options.headed) return null;
+  return (
+    `${canvases} canvas${canvases === 1 ? "" : "es"} on the page, and Chrome ran without its GPU:` +
+    " a WebGL scene's frames, rate and long frames are software rendering's. Measure it with --headed."
+  );
+}
+
+/**
+ * Creates `out` and returns its absolute path. When it is inside the project's
+ * `.gsap-motion/` — the default is — that folder gets a `.gitignore` of `*`,
+ * so the frames are never committed: a real project committed four of them in
+ * its first commit, and a knowledge-graph tool indexed them after that. The
+ * project's own `.gitignore` is left alone, and so is any other `--out`.
+ */
+export function prepareOut(out, cwd = process.cwd()) {
+  const path = resolve(cwd, out);
+  mkdirSync(path, { recursive: true });
+  const own = resolve(cwd, ".gsap-motion");
+  if (path === own || path.startsWith(own + sep)) {
+    const ignore = join(own, ".gitignore");
+    if (!existsSync(ignore)) writeFileSync(ignore, "# Written by gsap-motion: frames are not source.\n*\n");
+  }
+  return path;
+}
+
 // --- The run -----------------------------------------------------------------
 
 const wait = (ms) => new Promise((done) => setTimeout(done, ms));
@@ -356,7 +446,7 @@ async function capture(options) {
     );
   }
 
-  const browser = connect(executable);
+  const browser = connect(executable, { headless: !options.headed });
   const notes = [];
 
   try {
@@ -467,18 +557,27 @@ async function capture(options) {
       }
     }
 
-    mkdirSync(resolve(options.out), { recursive: true });
+    const out = prepareOut(options.out);
 
     const frames = [];
     let elapsed = 0;
+    if (options.seek && !(await evaluate(`typeof window.${options.seek} === "function"`))) {
+      throw new Error(
+        `--seek: window.${options.seek} is not a function on this page. Export it in development; see refine.md.`,
+      );
+    }
     for (const at of options.at) {
-      if (at > elapsed) {
+      if (options.seek) {
+        /** Seek, then let two frames render, so what is captured is that time drawn. */
+        await evaluate(`window.${options.seek}(${at})`);
+        await evaluate(SETTLED);
+      } else if (at > elapsed) {
         await wait(at - elapsed);
         elapsed = at;
       }
       const shot = await call("Page.captureScreenshot", { format: "png" });
       const bytes = Buffer.from(shot.data, "base64");
-      const file = join(resolve(options.out), `frame-${String(at).padStart(5, "0")}ms.png`);
+      const file = join(out, frameName(at, options));
       writeFileSync(file, bytes);
       frames.push({ at, file, bytes: bytes.length });
     }
@@ -487,6 +586,7 @@ async function capture(options) {
     const drawn = await evaluate(
       "({ frames: window.__gsapMotionFrames ?? null, since: window.__gsapMotionStart ?? null })",
     );
+    const canvases = await evaluate("document.querySelectorAll(\"canvas\").length");
     const after = await call("Performance.getMetrics");
 
     const delta = (name) => {
@@ -511,7 +611,7 @@ async function capture(options) {
       overMs: span,
     };
 
-    return { url: options.url, frames, timeline, measured, notes, chrome: executable };
+    return { url: options.url, frames, timeline, measured, notes, canvases, chrome: executable };
   } finally {
     await browser.close();
   }
@@ -527,13 +627,18 @@ export function report(result, options) {
     options.dark && "dark",
     options.mobile && "mobile 390x844",
     options.cpu > 1 && `CPU ÷${options.cpu}`,
+    options.headed && "headed, on the GPU",
+    options.seek && `seeking with window.${options.seek}`,
   ].filter(Boolean);
   if (emulated.length) lines.push(`  as: ${emulated.join(", ")}`);
   for (const note of result.notes) lines.push(`  ${note}`);
+  const gpu = gpuNote(result.canvases, options);
+  if (gpu) lines.push(`  ${gpu}`);
 
   lines.push("", `Frames (${result.frames.length}), in ${options.out}`);
   for (const frame of result.frames) {
-    lines.push(`  ${String(frame.at).padStart(5)}ms  ${frame.file}`);
+    const when = options.seek ? `${frame.at}s`.padStart(8) : `${String(frame.at).padStart(5)}ms`;
+    lines.push(`  ${when}  ${frame.file}`);
   }
 
   lines.push("", "Timeline, as the page is running it");
@@ -591,6 +696,11 @@ async function main(argv) {
     process.exit(2);
   }
 
+  if (options.probe) {
+    console.log(probe());
+    return;
+  }
+
   try {
     const result = await capture(options);
     console.log(options.json ? JSON.stringify(result, null, 2) : report(result, options));

package/skill/scripts/lib/ast.mjs

@@ -214,26 +214,75 @@ export function tweenMethod(node) {
   return allowed.has(method) ? method : null;
 }
 
-const argumentObject = (call, index) => {
-  const node = unwrap(call.arguments[index]);
-  return node?.type === "ObjectExpression" ? node : null;
-};
+/**
+ * The object literal bound to `name` by a `const`, when the file binds that
+ * name exactly once. Two bindings of one name, in different functions, would
+ * need scope to tell apart; a wrong guess is a false finding, so neither is
+ * read.
+ */
+function constObject(root, name) {
+  const bound = findAll(
+    root,
+    (node) => node.type === "VariableDeclarator" && node.id.type === "Identifier" && node.id.name === name,
+  );
+  if (bound.length !== 1 || !bound[0].init) return null;
+  const declaration = parentOf(root, bound[0]);
+  if (declaration?.kind !== "const") return null;
+  const init = unwrap(bound[0].init);
+  return init.type === "ObjectExpression" ? init : null;
+}
+
+/** `node`'s properties, re-anchored at `site`: a finding lands where the tween uses them. */
+const anchoredAt = (properties, site) =>
+  properties.map((property) => ({ ...property, start: site.start, end: site.end }));
+
+/**
+ * The object a vars argument stands for: a literal, or a `const` bound to one,
+ * with any spread of such a `const` unfolded in place. Vars written once and
+ * shared between a `fromTo`'s ends are how a real film's credits hid two of
+ * seven filter tweens from the audit.
+ */
+function resolveObject(root, node, seen = new Set()) {
+  let target = unwrap(node);
+  let site = null;
+  if (target?.type === "Identifier" && root) {
+    site = target;
+    target = constObject(root, target.name);
+  }
+  if (target?.type !== "ObjectExpression" || seen.has(target)) return null;
+  seen.add(target);
+
+  let unfolded = false;
+  const properties = target.properties.flatMap((property) => {
+    if (property.type !== "SpreadElement") return [property];
+    const spread = resolveObject(root, property.argument, seen);
+    if (!spread) return [property];
+    unfolded = true;
+    return anchoredAt(spread.properties, property);
+  });
+  /** A literal with nothing to unfold is returned as it is, not as a copy. */
+  if (site) return { ...target, start: site.start, end: site.end, properties: anchoredAt(properties, site) };
+  return unfolded ? { ...target, properties } : target;
+}
+
+const argumentObject = (call, index, root) => resolveObject(root, call.arguments[index]);
 
 /**
  * The vars object that holds a tween's own settings — `repeat`, `ease`,
  * `yoyo`: the second argument, a `fromTo`'s third, a timeline's first. `null`
- * when it is not an object literal.
+ * when it is neither an object literal nor a `const` bound to one. Pass the
+ * file's `root` to follow a `const`; without it, only literals are read.
  */
-export const ownVars = (call, method) =>
-  argumentObject(call, method === "fromTo" ? 2 : method === "timeline" ? 0 : 1);
+export const ownVars = (call, method, root) =>
+  argumentObject(call, method === "fromTo" ? 2 : method === "timeline" ? 0 : 1, root);
 
 /**
  * Every vars object a tween call carries, as object literals: both of a
  * `fromTo`'s, a timeline's own, or the tween's.
  */
-export function varsObjects(call, method) {
+export function varsObjects(call, method, root) {
   const indexes = method === "fromTo" ? [1, 2] : method === "timeline" ? [0] : [1];
-  return indexes.map((index) => argumentObject(call, index)).filter(Boolean);
+  return indexes.map((index) => argumentObject(call, index, root)).filter(Boolean);
 }
 
 const FUNCTIONS = new Set([