refactor(studio): revert to absolute GSAP positions + shift-on-drag

Reverts the clip-relative position model and replaces it with absolute
positions that Studio rewrites atomically when clips are dragged or
left-edge-resized.

- Remove applyClipRelativeOffsets runtime machinery and sentinel gate
- Revert Studio hooks to write absolute positions
- Revert globalTimeCompiler, AnimationCard, parser, keyframe cache
- Add shiftGsapPositionsInHtml for atomic position shifting on drag/resize

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

Author: miguel-heygen

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

@@ -585,20 +585,20 @@ describe("unresolvable value round-trip", () => {
 });
 
 describe("gsapAnimationsToKeyframes", () => {
-  it("converts clip-relative animations to keyframes", () => {
+  it("converts animations to keyframes with element start offset", () => {
     const animations: GsapAnimation[] = [
       {
         id: "anim-1",
         targetSelector: "#el1",
         method: "set",
-        position: 0,
+        position: 2,
         properties: { x: 100, y: 200 },
       },
       {
         id: "anim-2",
         targetSelector: "#el1",
         method: "to",
-        position: 1,
+        position: 3,
         properties: { x: 300, y: 400 },
         duration: 1,
         ease: "power2.out",
@@ -608,9 +608,11 @@ describe("gsapAnimationsToKeyframes", () => {
     const keyframes = gsapAnimationsToKeyframes(animations, 2);
 
     expect(keyframes).toHaveLength(2);
+    // First keyframe: time = 2 - 2 = 0
     expect(keyframes[0].time).toBe(0);
     expect(keyframes[0].properties.x).toBe(100);
     expect(keyframes[0].properties.y).toBe(200);
+    // Second keyframe: time = 3 - 2 = 1
     expect(keyframes[1].time).toBe(1);
     expect(keyframes[1].properties.x).toBe(300);
     expect(keyframes[1].ease).toBe("power2.out");
@@ -648,14 +650,14 @@ describe("gsapAnimationsToKeyframes", () => {
         id: "anim-1",
         targetSelector: "#el1",
         method: "set",
-        position: 0,
+        position: 5,
         properties: { x: 0, y: 0 },
       },
       {
         id: "anim-2",
         targetSelector: "#el1",
         method: "to",
-        position: 1,
+        position: 6,
         properties: { x: 100 },
         duration: 1,
       },
@@ -737,10 +739,10 @@ describe("keyframesToGsapAnimations", () => {
 
     expect(animations).toHaveLength(2);
     expect(animations[0].method).toBe("set");
-    expect(animations[0].position).toBe(0); // clip-relative
+    expect(animations[0].position).toBe(2); // elementStartTime + 0
     expect(animations[0].properties.opacity).toBe(0);
     expect(animations[1].method).toBe("to");
-    expect(animations[1].position).toBe(0); // prev keyframe time (clip-relative)
+    expect(animations[1].position).toBe(2); // position of prev keyframe
     expect(animations[1].duration).toBe(1); // kf.time - prevKf.time
     expect(animations[1].ease).toBe("power2.out");
   });
@@ -1977,7 +1979,7 @@ describe("splitAnimationsInScript", () => {
     expect(forNew).toHaveLength(1);
     expect(forNew[0]!.method).toBe("set");
     expect(forNew[0]!.properties.x).toBe(100);
-    expect(forNew[0]!.position).toBe(0);
+    expect(forNew[0]!.position).toBe(opts.splitTime);
   });
 
   it("retargets animation entirely in second half to new element", () => {
@@ -2125,7 +2127,7 @@ tl.to("#el1", { y: 200, duration: 1 }, 3);`;
     expect(forOriginal.length).toBe(0);
     expect(forNew.length).toBe(1);
     expect(forNew[0]!.method).toBe("set");
-    expect(forNew[0]!.position).toBe(1);
+    expect(forNew[0]!.position).toBe(3);
   });
 
   it("inserts inherited state set before other tweens targeting new element", () => {

packages/core/src/parsers/gsapParser.ts

@@ -1253,9 +1253,6 @@ function applyUpdatesToCall(call: TweenCallInfo, updates: Partial<GsapAnimation>
     const posIdx = call.method === "fromTo" ? 3 : 2;
     call.node.arguments[posIdx] = parseExpr(valueToCode(updates.position));
   }
-  if (updates.targetSelector !== undefined) {
-    call.node.arguments[0] = parseExpr(valueToCode(updates.targetSelector));
-  }
 }
 
 /** Walk up to the enclosing ExpressionStatement path (for prune / insertAfter). */
@@ -1325,6 +1322,24 @@ export function updateAnimationInScript(
   return recast.print(parsed.ast).code;
 }
 
+function updateAnimationSelector(script: string, animationId: string, newSelector: string): string {
+  let parsed: ParsedGsapAst;
+  try {
+    parsed = parseGsapAst(script);
+  } catch {
+    return script;
+  }
+  const target = parsed.located.find((l) => l.id === animationId);
+  if (!target) return script;
+  const selectorArg = target.call.path.node.arguments?.[0];
+  if (selectorArg?.type === "StringLiteral") {
+    selectorArg.value = newSelector;
+  } else if (selectorArg?.type === "Identifier") {
+    target.call.path.node.arguments[0] = { type: "StringLiteral", value: newSelector };
+  }
+  return recast.print(parsed.ast).code;
+}
+
 export function addAnimationToScript(
   script: string,
   animation: Omit<GsapAnimation, "id">,
@@ -1522,7 +1537,7 @@ export function splitAnimationsInScript(
   if (matching.length === 0) return { script, skippedSelectors };
 
   let result = script;
-  const relSplitTime = opts.splitTime - opts.elementStart;
+  const newElementStart = opts.splitTime;
   const inheritedProps: Record<string, number | string> = {};
 
   // Reverse iteration: updateAnimationSelector mutates selectors in the source
@@ -1535,19 +1550,16 @@ export function splitAnimationsInScript(
     const animEnd = pos + dur;
 
     if (anim.keyframes) {
-      if (pos >= relSplitTime) {
-        result = updateAnimationInScript(result, anim.id, {
-          position: pos - relSplitTime,
-          targetSelector: newSelector,
-        });
-      } else if (animEnd > relSplitTime) {
+      if (pos >= opts.splitTime) {
+        result = updateAnimationSelector(result, anim.id, newSelector);
+      } else if (animEnd > opts.splitTime) {
         // Spanning keyframes can't be correctly split without renormalizing
         // percentages and durations — leave on original, warn the caller.
         skippedSelectors.push(`${originalSelector} (keyframes spanning split)`);
         const kfs = anim.keyframes.keyframes;
         for (const kf of kfs) {
           const kfTime = pos + (kf.percentage / 100) * dur;
-          if (kfTime <= relSplitTime) {
+          if (kfTime <= opts.splitTime) {
             for (const [k, v] of Object.entries(kf.properties)) {
               inheritedProps[k] = v;
             }
@@ -1565,18 +1577,15 @@ export function splitAnimationsInScript(
       continue;
     }
 
-    if (animEnd <= relSplitTime) {
+    if (animEnd <= opts.splitTime) {
       for (const [k, v] of Object.entries(anim.properties)) {
         inheritedProps[k] = v;
       }
       continue;
     }
 
-    if (pos >= relSplitTime) {
-      result = updateAnimationInScript(result, anim.id, {
-        position: pos - relSplitTime,
-        targetSelector: newSelector,
-      });
+    if (pos >= opts.splitTime) {
+      result = updateAnimationSelector(result, anim.id, newSelector);
       continue;
     }
 
@@ -1585,7 +1594,7 @@ export function splitAnimationsInScript(
     // For .fromTo() tweens we have explicit from-values; for .to() tweens
     // we use accumulated state from prior animations, defaulting to 0 for
     // unknown numeric properties (the standard GSAP transform initial state).
-    const progress = dur > 0 ? (relSplitTime - pos) / dur : 0;
+    const progress = dur > 0 ? (opts.splitTime - pos) / dur : 0;
     const fromSource = anim.fromProperties ?? inheritedProps;
     const midProps: Record<string, number | string> = {};
     for (const [k, v] of Object.entries(anim.properties)) {
@@ -1597,17 +1606,17 @@ export function splitAnimationsInScript(
       midProps[k] = fromVal + (v - fromVal) * progress;
     }
 
-    const firstHalfDuration = relSplitTime - pos;
+    const firstHalfDuration = opts.splitTime - pos;
     result = updateAnimationInScript(result, anim.id, {
       duration: firstHalfDuration,
       properties: midProps,
     });
 
-    const secondHalfDuration = animEnd - relSplitTime;
+    const secondHalfDuration = animEnd - opts.splitTime;
     const addResult = addAnimationToScript(result, {
       targetSelector: newSelector,
       method: "fromTo",
-      position: 0,
+      position: newElementStart,
       duration: secondHalfDuration,
       properties: { ...anim.properties },
       fromProperties: { ...midProps },
@@ -1622,7 +1631,7 @@ export function splitAnimationsInScript(
   }
 
   if (Object.keys(inheritedProps).length > 0) {
-    result = insertInheritedStateSet(result, newSelector, 0, inheritedProps);
+    result = insertInheritedStateSet(result, newSelector, newElementStart, inheritedProps);
   }
 
   return { script: result, skippedSelectors };

packages/core/src/parsers/gsapSerialize.ts

@@ -238,7 +238,7 @@ export function validateCompositionGsap(script: string): ValidationResult {
 export function keyframesToGsapAnimations(
   elementId: string,
   keyframes: Keyframe[],
-  _elementStartTime: number,
+  elementStartTime: number,
   base?: { x?: number; y?: number; scale?: number },
 ): GsapAnimation[] {
   const sorted = [...keyframes].sort((a, b) => a.time - b.time);
@@ -248,10 +248,11 @@ export function keyframesToGsapAnimations(
   const baseScale = base?.scale ?? 1;
 
   sorted.forEach((kf, i) => {
+    const absoluteTime = elementStartTime + kf.time;
     const isFirst = i === 0;
     const prevKf = i > 0 ? sorted[i - 1] : null;
     const duration = prevKf ? kf.time - prevKf.time : undefined;
-    const position = prevKf ? prevKf.time : kf.time;
+    const position = prevKf ? elementStartTime + prevKf.time : absoluteTime;
 
     const properties: Record<string, number | string> = {};
     for (const [key, value] of Object.entries(kf.properties)) {
@@ -278,7 +279,7 @@ export function keyframesToGsapAnimations(
 
 export function gsapAnimationsToKeyframes(
   animations: GsapAnimation[],
-  _elementStartTime: number,
+  elementStartTime: number,
   options?: {
     baseX?: number;
     baseY?: number;
@@ -302,7 +303,8 @@ export function gsapAnimationsToKeyframes(
         validMethods.includes(a.method) && typeof a.position === "number",
     )
     .map((a) => {
-      const time = clampTimeToZero ? Math.max(0, a.position) : a.position;
+      const relativeTimeRaw = a.position - elementStartTime;
+      const time = clampTimeToZero ? Math.max(0, relativeTimeRaw) : relativeTimeRaw;
 
       const properties: Partial<KeyframeProperties> = {};
       for (const [key, value] of Object.entries(a.properties)) {