feat(studio): scale GSAP positions on clip resize + shift on drag + diamond fixes

Resize: proportionally scale all GSAP animation positions and durations
to fit the new clip duration via scalePositionsInScript. This preserves
clip-relative keyframe percentages — diamonds don't move during resize,
nothing disappears. Modeled after After Effects Time Stretch behavior.

Drag: shift all GSAP positions by the time delta (unchanged from before).

Diamond rendering:
- Clamp diamonds at 0%/100% so they stay fully visible at clip edges
- Filter out-of-range keyframes using predicted percentages during resize
- Clamp connection lines to clip boundaries
- PropertyRows: same edge clamping for SVG diamonds

Parser: scalePositionsInScript (proportional position + duration scaling),
shiftPositionsInScript (rigid shift), scale-positions + shift-positions
mutation types, 5 shift tests passing.

Author: miguel-heygen

packages/core/src/parsers/gsapParser.test.ts

@@ -19,6 +19,7 @@ import {
   addAnimationWithKeyframesToScript,
   splitAnimationsInScript,
   splitIntoPropertyGroups,
+  shiftPositionsInScript,
 } from "./gsapParser.js";
 import type { GsapAnimation } from "./gsapParser.js";
 import { classifyPropertyGroup, classifyTweenPropertyGroup } from "./gsapConstants.js";
@@ -2275,3 +2276,57 @@ describe("splitIntoPropertyGroups", () => {
     }
   });
 });
+
+describe("shiftPositionsInScript", () => {
+  it("shifts all numeric positions for the target selector", () => {
+    const script = `const tl = gsap.timeline({ paused: true });
+tl.from("#hero", { opacity: 0, duration: 1 }, 0);
+tl.to("#hero", { opacity: 0, duration: 0.5 }, 2.5);
+tl.from("#bg", { scale: 0, duration: 1 }, 1);`;
+    const result = shiftPositionsInScript(script, "#hero", 3);
+    const parsed = parseGsapScript(result);
+    const hero = parsed.animations.filter((a) => a.targetSelector === "#hero");
+    expect(hero[0].position).toBe(3);
+    expect(hero[1].position).toBe(5.5);
+    const bg = parsed.animations.find((a) => a.targetSelector === "#bg");
+    expect(bg!.position).toBe(1);
+  });
+
+  it("clamps negative-going positions to zero", () => {
+    const script = `const tl = gsap.timeline({ paused: true });
+tl.to("#el", { x: 100, duration: 1 }, 0.3);
+tl.to("#el", { y: 50, duration: 1 }, 1.5);`;
+    const result = shiftPositionsInScript(script, "#el", -1.0);
+    const parsed = parseGsapScript(result);
+    const anims = parsed.animations.filter((a) => a.targetSelector === "#el");
+    expect(anims[0].position).toBe(0);
+    expect(anims[1].position).toBe(0.5);
+  });
+
+  it("returns the original script when delta is zero", () => {
+    const script = `const tl = gsap.timeline({ paused: true });
+tl.to("#el", { x: 100, duration: 1 }, 2);`;
+    expect(shiftPositionsInScript(script, "#el", 0)).toBe(script);
+  });
+
+  it("does not collide when two tweens have adjacent positions (Via's race case)", () => {
+    const script = `const tl = gsap.timeline({ paused: true });
+tl.to("#burst", { opacity: 1, duration: 0.5 }, 1.0);
+tl.to("#burst", { opacity: 0, duration: 0.5 }, 1.5);`;
+    const result = shiftPositionsInScript(script, "#burst", 0.5);
+    const parsed = parseGsapScript(result);
+    const burst = parsed.animations.filter((a) => a.targetSelector === "#burst");
+    expect(burst[0].position).toBe(1.5);
+    expect(burst[1].position).toBe(2);
+  });
+
+  it("skips string positions", () => {
+    const script = `const tl = gsap.timeline({ paused: true });
+tl.to("#el", { x: 100, duration: 1 }, 2);
+tl.to("#el", { y: 50, duration: 1 }, "+=0.5");`;
+    const result = shiftPositionsInScript(script, "#el", 1);
+    const parsed = parseGsapScript(result);
+    expect(parsed.animations[0].position).toBe(3);
+    expect(parsed.animations[1].position).toBe("+=0.5");
+  });
+});

packages/core/src/parsers/gsapParser.ts

@@ -1322,6 +1322,67 @@ export function updateAnimationInScript(
   return recast.print(parsed.ast).code;
 }
 
+export function shiftPositionsInScript(
+  script: string,
+  targetSelector: string,
+  delta: number,
+): string {
+  let parsed: ParsedGsapAst;
+  try {
+    parsed = parseGsapAst(script);
+  } catch (e) {
+    console.warn("[gsap-parser] shiftPositionsInScript parse failed:", e);
+    return script;
+  }
+  let changed = false;
+  for (const entry of parsed.located) {
+    if (entry.animation.targetSelector !== targetSelector) continue;
+    if (typeof entry.animation.position !== "number") continue;
+    const newPos = Math.max(0, Math.round((entry.animation.position + delta) * 1000) / 1000);
+    applyUpdatesToCall(entry.call, { position: newPos });
+    changed = true;
+  }
+  return changed ? recast.print(parsed.ast).code : script;
+}
+
+export function scalePositionsInScript(
+  script: string,
+  targetSelector: string,
+  oldStart: number,
+  oldDuration: number,
+  newStart: number,
+  newDuration: number,
+): string {
+  if (oldDuration <= 0 || newDuration <= 0) return script;
+  const ratio = newDuration / oldDuration;
+  let parsed: ParsedGsapAst;
+  try {
+    parsed = parseGsapAst(script);
+  } catch (e) {
+    console.warn("[gsap-parser] scalePositionsInScript parse failed:", e);
+    return script;
+  }
+  let changed = false;
+  for (const entry of parsed.located) {
+    if (entry.animation.targetSelector !== targetSelector) continue;
+    if (typeof entry.animation.position !== "number") continue;
+    const newPos = Math.max(
+      0,
+      Math.round((newStart + (entry.animation.position - oldStart) * ratio) * 1000) / 1000,
+    );
+    const updates: Partial<GsapAnimation> = { position: newPos };
+    if (typeof entry.animation.duration === "number" && entry.animation.duration > 0) {
+      updates.duration = Math.max(
+        0.001,
+        Math.round(entry.animation.duration * ratio * 1000) / 1000,
+      );
+    }
+    applyUpdatesToCall(entry.call, updates);
+    changed = true;
+  }
+  return changed ? recast.print(parsed.ast).code : script;
+}
+
 function updateAnimationSelector(script: string, animationId: string, newSelector: string): string {
   let parsed: ParsedGsapAst;
   try {

packages/core/src/studio-api/routes/files.ts

@@ -466,6 +466,19 @@ type GsapMutationRequest =
   | {
       type: "delete-all-for-selector";
       targetSelector: string;
+    }
+  | {
+      type: "shift-positions";
+      targetSelector: string;
+      delta: number;
+    }
+  | {
+      type: "scale-positions";
+      targetSelector: string;
+      oldStart: number;
+      oldDuration: number;
+      newStart: number;
+      newDuration: number;
     };
 
 // ── GSAP mutation executor ──────────────────────────────────────────────────
@@ -715,6 +728,26 @@ async function executeGsapMutation(
       const result = splitIntoPropertyGroups(block.scriptText, body.animationId);
       return result.script;
     }
+    case "shift-positions": {
+      const { targetSelector, delta } = body;
+      if (!targetSelector || typeof delta !== "number" || delta === 0) return block.scriptText;
+      const { shiftPositionsInScript } = parser;
+      return shiftPositionsInScript(block.scriptText, targetSelector, delta);
+    }
+    case "scale-positions": {
+      const { targetSelector, oldStart, oldDuration, newStart, newDuration } = body;
+      if (!targetSelector || oldDuration <= 0 || newDuration <= 0) return block.scriptText;
+      if (oldStart === newStart && oldDuration === newDuration) return block.scriptText;
+      const { scalePositionsInScript } = parser;
+      return scalePositionsInScript(
+        block.scriptText,
+        targetSelector,
+        oldStart,
+        oldDuration,
+        newStart,
+        newDuration,
+      );
+    }
     default:
       return respond({ error: `unknown mutation type: ${(body as { type: string }).type}` }, 400);
   }

packages/studio/src/components/editor/GestureTrailOverlay.tsx

@@ -6,7 +6,7 @@ interface GestureTrailOverlayProps {
   sampleCount?: number;
   trail?: Array<{ x: number; y: number }>;
   simplifiedPoints?: Map<number, Record<string, number>>;
-  canvasRect: { left: number; top: number; width: number; height: number };
+  canvasRect: { left: number; top: number; width: number; height: number } | null;
   compositionSize?: { width: number; height: number };
   mode: "recording" | "preview";
   accentColor?: string;
@@ -22,6 +22,8 @@ export const GestureTrailOverlay = memo(function GestureTrailOverlay({
   mode,
   accentColor = "#3CE6AC",
 }: GestureTrailOverlayProps) {
+  if (!canvasRect) return null;
+
   const trailPoints = useMemo(() => {
     if (trail && trail.length > 1) {
       return trail.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");

packages/studio/src/hooks/timelineEditingHelpers.ts

@@ -144,5 +144,66 @@ export async function readFileContent(projectId: string, targetPath: string): Pr
   return data.content;
 }
 
+/**
+ * Shift all GSAP animation positions targeting a given element by a time delta.
+ * Calls the server-side GSAP mutation endpoint which uses the AST-based parser.
+ */
+export async function shiftGsapPositions(
+  projectId: string,
+  filePath: string,
+  elementId: string,
+  delta: number,
+): Promise<void> {
+  if (delta === 0 || !elementId) return;
+  const res = await fetch(
+    `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(filePath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        type: "shift-positions",
+        targetSelector: `#${elementId}`,
+        delta,
+      }),
+    },
+  );
+  if (!res.ok) {
+    const err = await res.json().catch(() => null);
+    throw new Error((err as { error?: string })?.error ?? "shift-positions failed");
+  }
+}
+
+export async function scaleGsapPositions(
+  projectId: string,
+  filePath: string,
+  elementId: string,
+  oldStart: number,
+  oldDuration: number,
+  newStart: number,
+  newDuration: number,
+): Promise<void> {
+  if (!elementId || oldDuration <= 0 || newDuration <= 0) return;
+  if (oldStart === newStart && oldDuration === newDuration) return;
+  const res = await fetch(
+    `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(filePath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        type: "scale-positions",
+        targetSelector: `#${elementId}`,
+        oldStart,
+        oldDuration,
+        newStart,
+        newDuration,
+      }),
+    },
+  );
+  if (!res.ok) {
+    const err = await res.json().catch(() => null);
+    throw new Error((err as { error?: string })?.error ?? "scale-positions failed");
+  }
+}
+
 // Re-export applyPatchByTarget for use in the hook (avoids double import in callers)
 export { applyPatchByTarget, formatTimelineAttributeNumber };

packages/studio/src/hooks/useTimelineEditing.ts

@@ -26,6 +26,8 @@ import {
   readFileContent,
   applyPatchByTarget,
   formatTimelineAttributeNumber,
+  shiftGsapPositions,
+  scaleGsapPositions,
 } from "./timelineEditingHelpers";
 import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
 
@@ -122,6 +124,8 @@ export function useTimelineEditing({
         ["data-start", formatTimelineAttributeNumber(updates.start)],
         ["data-track-index", String(updates.track)],
       ]);
+      const delta = updates.start - element.start;
+      const filePath = element.sourceFile || activeCompPath || "index.html";
       return enqueueEdit(element, "Move timeline clip", (original, target) => {
         let patched = applyPatchByTarget(original, target, {
           type: "attribute",
@@ -133,9 +137,16 @@ export function useTimelineEditing({
           property: "track-index",
           value: String(updates.track),
         });
+      }).then(() => {
+        const pid = projectIdRef.current;
+        if (delta !== 0 && element.domId && pid) {
+          return shiftGsapPositions(pid, filePath, element.domId, delta)
+            .then(() => reloadPreview())
+            .catch((err) => console.error("[Timeline] Failed to shift GSAP positions", err));
+        }
       });
     },
-    [previewIframeRef, enqueueEdit],
+    [previewIframeRef, enqueueEdit, activeCompPath, reloadPreview],
   );
 
   const handleTimelineElementResize = useCallback(
@@ -147,9 +158,6 @@ export function useTimelineEditing({
         ["data-start", formatTimelineAttributeNumber(updates.start)],
         ["data-duration", formatTimelineAttributeNumber(updates.duration)],
       ];
-      // A start-edge trim advances the media-start offset (skips into the
-      // source). Patch it live too — otherwise the iframe keeps the old offset
-      // and the clip only repositions instead of trimming the audio.
       if (updates.playbackStart != null) {
         const liveAttr =
           element.playbackStartAttr === "playback-start"
@@ -158,6 +166,9 @@ export function useTimelineEditing({
         liveAttrs.push([liveAttr, formatTimelineAttributeNumber(updates.playbackStart)]);
       }
       patchIframeDomTiming(previewIframeRef.current, element, liveAttrs);
+      const filePath = element.sourceFile || activeCompPath || "index.html";
+      const timingChanged =
+        updates.start !== element.start || updates.duration !== element.duration;
       return enqueueEdit(element, "Resize timeline clip", (original, target) => {
         const pbs = resolveResizePlaybackStart(original, target, element, updates);
         let patched = applyPatchByTarget(original, target, {
@@ -178,9 +189,25 @@ export function useTimelineEditing({
           });
         }
         return patched;
+      }).then(() => {
+        const pid = projectIdRef.current;
+        if (timingChanged && element.domId && pid) {
+          return scaleGsapPositions(
+            pid,
+            filePath,
+            element.domId,
+            element.start,
+            element.duration,
+            updates.start,
+            updates.duration,
+          )
+            .then(() => reloadPreview())
+            .catch((err) => console.error("[Timeline] Failed to scale GSAP positions", err));
+        }
+        return reloadPreview();
       });
     },
-    [previewIframeRef, enqueueEdit],
+    [previewIframeRef, enqueueEdit, activeCompPath, reloadPreview],
   );
 
   const handleTimelineElementDelete = useCallback(