feat(studio): shift GSAP animation positions on clip drag and resize

When a clip is moved or left-edge-resized on the timeline, all GSAP
animation positions targeting that element now shift by the time delta.
Uses the AST-based parser (parseGsapScript + updateAnimationInScript)
via a new shift-positions mutation type on the server, keeping positions
absolute and the script as the single source of truth.

- Add shift-positions GSAP mutation type to the studio API
- Wire handleTimelineElementMove and handleTimelineElementResize to
  call the shift mutation after persisting the data-start change
- Add elementStart parameter to globalTimeCompiler.resolveTweenStart
  for future-proof absolute-to-clip-local conversion

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>

Author: miguel-heygen

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

@@ -466,6 +466,11 @@ type GsapMutationRequest =
   | {
       type: "delete-all-for-selector";
       targetSelector: string;
+    }
+  | {
+      type: "shift-positions";
+      targetSelector: string;
+      delta: number;
     };
 
 // ── GSAP mutation executor ──────────────────────────────────────────────────
@@ -715,6 +720,19 @@ 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 parsed = parseGsapScript(block.scriptText);
+      let script = block.scriptText;
+      for (const anim of parsed.animations) {
+        if (anim.targetSelector !== targetSelector) continue;
+        if (typeof anim.position !== "number") continue;
+        const newPos = Math.max(0, Math.round((anim.position + delta) * 1000) / 1000);
+        script = updateAnimationInScript(script, anim.id, { position: newPos });
+      }
+      return script;
+    }
     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/components/editor/PropertyPanel.tsx

@@ -11,7 +11,6 @@ import {
   readGsapBorderRadiusForPanel,
 } from "./propertyPanelHelpers";
 import { MetricField, Section } from "./propertyPanelPrimitives";
-import { createTransformCommitHandlers } from "./propertyPanelTransformCommit";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
@@ -159,7 +158,66 @@ export const PropertyPanel = memo(function PropertyPanel({
       ? manualSize.height
       : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
 
+  const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
+    const parsed = parsePxMetricValue(nextValue);
+    if (parsed == null) return;
+    if (onCommitAnimatedProperty && hasGsapAnimation) {
+      void onCommitAnimatedProperty(element, axis, parsed);
+      return;
+    }
+    if (gsapKeyframes && gsapAnimId && onAddKeyframe) {
+      const pct = Math.max(0, Math.min(100, Math.round(currentPct * 10) / 10));
+      onAddKeyframe(gsapAnimId, pct, axis, parsed);
+      return;
+    }
+    if (hasGsapAnimation) {
+      showToast?.("Cannot edit position — animation callbacks not available");
+      return;
+    }
+    const current = readStudioPathOffset(element.element);
+    void Promise.resolve(
+      onSetManualOffset(element, {
+        x: axis === "x" ? parsed : current.x,
+        y: axis === "y" ? parsed : current.y,
+      }),
+    ).catch(() => undefined);
+  };
+
+  // fallow-ignore-next-line complexity
+  const commitManualSize = (axis: "width" | "height", nextValue: string) => {
+    const parsed = parsePxMetricValue(nextValue);
+    if (parsed == null || parsed <= 0) return;
+    if (onCommitAnimatedProperty && hasGsapAnimation) {
+      void onCommitAnimatedProperty(element, axis, parsed);
+      return;
+    }
+    if (hasGsapAnimation) {
+      showToast?.("Cannot edit size — animation callbacks not available");
+      return;
+    }
+    const current = readStudioBoxSize(element.element);
+    const width =
+      current.width > 0
+        ? current.width
+        : (parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width);
+    const height =
+      current.height > 0
+        ? current.height
+        : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
+    void Promise.resolve(
+      onSetManualSize(element, {
+        width: axis === "width" ? parsed : width,
+        height: axis === "height" ? parsed : height,
+      }),
+    ).catch(() => undefined);
+  };
+
   const manualRotation = readStudioRotation(element.element);
+  const commitManualRotation = (nextValue: string) => {
+    const parsed = Number.parseFloat(nextValue);
+    if (!Number.isFinite(parsed)) return;
+    void Promise.resolve(onSetManualRotation(element, { angle: parsed })).catch(() => undefined);
+  };
 
   const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
   const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
@@ -169,21 +227,6 @@ export const PropertyPanel = memo(function PropertyPanel({
   const gsapKeyframes = gsapKfAnim?.keyframes?.keyframes ?? null;
   const gsapAnimId = gsapKfAnim?.id ?? gsapAnimations?.[0]?.id ?? null;
   const hasGsapAnimation = !!(gsapAnimId || gsapAnimations.length > 0);
-  const { commitManualOffset, commitManualSize, commitManualRotation } =
-    createTransformCommitHandlers({
-      element,
-      styles,
-      hasGsapAnimation,
-      gsapAnimId,
-      gsapKeyframes,
-      currentPct,
-      onCommitAnimatedProperty,
-      onAddKeyframe,
-      onSetManualOffset,
-      onSetManualSize,
-      onSetManualRotation,
-      showToast,
-    });
   const navKeyframes = cacheEntry?.keyframes ?? gsapKeyframes;
   const seekFromKfPct = (pct: number) => onSeekToTime?.(elStart + (pct / 100) * elDuration);
 

packages/studio/src/hooks/timelineEditingHelpers.ts

@@ -144,5 +144,34 @@ 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");
+  }
+}
+
 // 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,7 @@ import {
   readFileContent,
   applyPatchByTarget,
   formatTimelineAttributeNumber,
+  shiftGsapPositions,
 } from "./timelineEditingHelpers";
 import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
 
@@ -122,6 +123,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 +136,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 +157,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"

packages/studio/src/utils/globalTimeCompiler.ts

@@ -26,11 +26,11 @@ export function isTimeWithinTween(
   return time >= tweenStart && time <= tweenStart + tweenDuration;
 }
 
-export function resolveTweenStart(animation: GsapAnimation): number | null {
-  if (animation.resolvedStart != null) return animation.resolvedStart;
-  if (typeof animation.position === "number") return animation.position;
+export function resolveTweenStart(animation: GsapAnimation, elementStart = 0): number | null {
+  if (animation.resolvedStart != null) return elementStart + animation.resolvedStart;
+  if (typeof animation.position === "number") return elementStart + animation.position;
   const parsed = Number.parseFloat(animation.position as string);
-  if (!Number.isNaN(parsed)) return parsed;
+  if (!Number.isNaN(parsed)) return elementStart + parsed;
   return null;
 }