@hyperframes/studio 0.6.52 → 0.6.54

package/src/components/editor/PropertyPanel.tsx

@@ -1,12 +1,7 @@
 import { memo } from "react";
 import { Clock, Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
 import { type DomEditSelection } from "./domEditing";
-import {
-  readStudioBoxSize,
-  readStudioPathOffset,
-  readStudioRotation,
-  readGsapTranslateFromTransform,
-} from "./manualEdits";
+import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import type { ImportedFontAsset } from "./fontAssets";
 import {
   EMPTY_STYLES,
@@ -18,12 +13,13 @@ import {
 import { MetricField, Section } from "./propertyPanelPrimitives";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
+import { GsapAnimationSection } from "./GsapAnimationSection";
+import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
 
 // Re-export helpers that external consumers import from this module
 export {
   buildStrokeStyleUpdates,
   buildStrokeWidthStyleUpdates,
-  clampPanelNumber,
   getCssFilterFunctionPx,
   getClipPathInsetPx,
   inferBoxShadowPreset,
@@ -54,6 +50,18 @@ interface PropertyPanelProps {
   onImportAssets?: (files: FileList) => Promise<string[]>;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  gsapAnimations?: import("@hyperframes/core/gsap-parser").GsapAnimation[];
+  gsapMultipleTimelines?: boolean;
+  gsapUnsupportedTimelinePattern?: boolean;
+  onUpdateGsapProperty?: (animId: string, prop: string, value: number | string) => void;
+  onUpdateGsapMeta?: (
+    animId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => void;
+  onDeleteGsapAnimation?: (animId: string) => void;
+  onAddGsapProperty?: (animId: string, prop: string) => void;
+  onRemoveGsapProperty?: (animId: string, prop: string) => void;
+  onAddGsapAnimation?: (method: "to" | "from" | "set") => void;
 }
 
 /* ------------------------------------------------------------------ */
@@ -146,6 +154,15 @@ export const PropertyPanel = memo(function PropertyPanel({
   onImportAssets,
   fontAssets = [],
   onImportFonts,
+  gsapAnimations = [],
+  gsapMultipleTimelines,
+  gsapUnsupportedTimelinePattern,
+  onUpdateGsapProperty,
+  onUpdateGsapMeta,
+  onDeleteGsapAnimation,
+  onAddGsapProperty,
+  onRemoveGsapProperty,
+  onAddGsapAnimation,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
 
@@ -186,11 +203,6 @@ export const PropertyPanel = memo(function PropertyPanel({
   const sourceLabel = element.id ? `#${element.id}` : element.selector;
   const showEditableSections = element.capabilities.canEditStyles;
   const manualOffset = readStudioPathOffset(element.element);
-  const gsapTranslate = readGsapTranslateFromTransform(element.element);
-  const visualOffset = {
-    x: manualOffset.x + gsapTranslate.x,
-    y: manualOffset.y + gsapTranslate.y,
-  };
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth =
     manualSize.width > 0
@@ -204,11 +216,10 @@ export const PropertyPanel = memo(function PropertyPanel({
   const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
     const parsed = parsePxMetricValue(nextValue);
     if (parsed == null) return;
-    const currentRaw = readStudioPathOffset(element.element);
-    const currentGsap = readGsapTranslateFromTransform(element.element);
+    const current = readStudioPathOffset(element.element);
     onSetManualOffset(element, {
-      x: axis === "x" ? parsed - currentGsap.x : currentRaw.x,
-      y: axis === "y" ? parsed - currentGsap.y : currentRaw.y,
+      x: axis === "x" ? parsed : current.x,
+      y: axis === "y" ? parsed : current.y,
     });
   };
 
@@ -300,14 +311,14 @@ export const PropertyPanel = memo(function PropertyPanel({
           <div className={RESPONSIVE_GRID}>
             <MetricField
               label="X"
-              value={formatPxMetricValue(visualOffset.x)}
+              value={formatPxMetricValue(manualOffset.x)}
               disabled={manualOffsetEditingDisabled}
               scrub
               onCommit={(next) => commitManualOffset("x", next)}
             />
             <MetricField
               label="Y"
-              value={formatPxMetricValue(visualOffset.y)}
+              value={formatPxMetricValue(manualOffset.y)}
               disabled={manualOffsetEditingDisabled}
               scrub
               onCommit={(next) => commitManualOffset("y", next)}
@@ -342,6 +353,25 @@ export const PropertyPanel = memo(function PropertyPanel({
           </div>
         </Section>
 
+        {STUDIO_GSAP_PANEL_ENABLED &&
+          onUpdateGsapProperty &&
+          onUpdateGsapMeta &&
+          onDeleteGsapAnimation &&
+          onAddGsapProperty &&
+          onAddGsapAnimation && (
+            <GsapAnimationSection
+              animations={gsapAnimations}
+              multipleTimelines={gsapMultipleTimelines}
+              unsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
+              onUpdateProperty={onUpdateGsapProperty}
+              onUpdateMeta={onUpdateGsapMeta}
+              onDeleteAnimation={onDeleteGsapAnimation}
+              onAddProperty={onAddGsapProperty}
+              onRemoveProperty={onRemoveGsapProperty ?? (() => {})}
+              onAddAnimation={onAddGsapAnimation}
+            />
+          )}
+
         {showEditableSections && (
           <StyleSections
             projectId={projectId}

package/src/components/editor/domEditingTypes.ts

@@ -1,4 +1,5 @@
 import type { PatchTarget } from "../../utils/sourcePatcher";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 
 export const CURATED_STYLE_PROPERTIES = [
   "position",
@@ -86,6 +87,7 @@ export interface DomEditSelection extends PatchTarget {
   computedStyles: Record<string, string>;
   textFields: DomEditTextField[];
   capabilities: DomEditCapabilities;
+  gsapAnimations?: GsapAnimation[];
 }
 
 export interface DomEditLayerItem {

package/src/components/editor/gsapAnimationConstants.ts

@@ -0,0 +1,130 @@
+import { controlPointsForGsapEase } from "./studioMotion";
+
+export const METHOD_LABELS: Record<string, string> = {
+  set: "Set",
+  to: "Animate",
+  from: "Animate In",
+  fromTo: "Animate",
+};
+
+export const METHOD_TOOLTIPS: Record<string, string> = {
+  set: "Instantly snap to these values — no transition",
+  to: "Smoothly animate the element to these target values",
+  from: "Element starts at these values and transitions to its normal state",
+  fromTo: "Animate from one state to another",
+};
+
+export const PROP_LABELS: Record<string, string> = {
+  x: "Move X",
+  y: "Move Y",
+  width: "Width",
+  height: "Height",
+  rotation: "Rotate",
+  opacity: "Opacity",
+  scale: "Scale",
+  scaleX: "Scale X",
+  scaleY: "Scale Y",
+  autoAlpha: "Visibility",
+  visibility: "Visible",
+  scaleX_alias: "Stretch X",
+};
+
+export const PROP_UNITS: Record<string, string> = {
+  x: "px",
+  y: "px",
+  width: "px",
+  height: "px",
+  rotation: "°",
+  opacity: "%",
+  scale: "×",
+  scaleX: "×",
+  scaleY: "×",
+  autoAlpha: "%",
+  visibility: "",
+};
+
+export const PROP_TOOLTIPS: Record<string, string> = {
+  x: "Move left/right (negative = left, positive = right)",
+  y: "Move up/down (negative = up, positive = down)",
+  opacity: "How visible (0 = invisible, 1 = fully visible)",
+  scale: "Size multiplier (1 = normal, 2 = double, 0.5 = half)",
+  scaleX: "Horizontal stretch (1 = normal)",
+  scaleY: "Vertical stretch (1 = normal)",
+  rotation: "Spin angle (360 = full rotation)",
+  width: "Element width",
+  height: "Element height",
+  autoAlpha: "Like opacity but hides element completely at 0",
+  visibility: "Show or hide the element",
+};
+
+export const EASE_LABELS: Record<string, string> = {
+  none: "Constant speed",
+  "power1.out": "Gentle slowdown",
+  "power2.out": "Smooth slowdown",
+  "power3.out": "Snappy slowdown",
+  "power4.out": "Sharp slowdown",
+  "power1.in": "Gentle speedup",
+  "power2.in": "Smooth speedup",
+  "power3.in": "Strong speedup",
+  "power4.in": "Sharp speedup",
+  "power1.inOut": "Gentle ease",
+  "power2.inOut": "Smooth ease",
+  "power3.inOut": "Strong ease",
+  "power4.inOut": "Sharp ease",
+  "back.out": "Overshoot & settle",
+  "back.in": "Pull back & go",
+  "back.inOut": "Pull & overshoot",
+  "elastic.out": "Springy bounce",
+  "elastic.in": "Wind up spring",
+  "elastic.inOut": "Full spring",
+  "bounce.out": "Drop & bounce",
+  "bounce.in": "Reverse bounce",
+  "bounce.inOut": "Double bounce",
+  "expo.out": "Very snappy stop",
+  "expo.in": "Very slow start",
+  "expo.inOut": "Dramatic ease",
+};
+
+export const EASE_CURVES: Record<string, [number, number, number, number]> = {
+  none: [0, 0, 1, 1],
+  "power1.out": [0, 0, 0.58, 1],
+  "power2.out": [0.16, 1, 0.3, 1],
+  "power3.out": [0.08, 0.82, 0.17, 1],
+  "power4.out": [0.06, 0.73, 0.09, 1],
+  "power1.in": [0.42, 0, 1, 1],
+  "power2.in": [0.55, 0.06, 0.68, 0.19],
+  "power3.in": [0.6, 0.04, 0.98, 0.34],
+  "power4.in": [0.7, 0, 0.84, 0],
+  "power1.inOut": [0.42, 0, 0.58, 1],
+  "power2.inOut": [0.45, 0.05, 0.55, 0.95],
+  "power3.inOut": [0.65, 0.05, 0.35, 1],
+  "power4.inOut": [0.76, 0, 0.24, 1],
+  "back.out": [0.34, 1.56, 0.64, 1],
+  "back.in": [0.36, 0, 0.66, -0.56],
+  "back.inOut": [0.68, -0.55, 0.27, 1.55],
+  "expo.out": [0.16, 1, 0.3, 1],
+  "expo.in": [0.7, 0, 0.84, 0],
+  "expo.inOut": [0.87, 0, 0.13, 1],
+};
+
+export function parseCustomEaseFromString(ease: string): {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+} {
+  const match = ease.match(/^custom\((.+)\)$/);
+  if (!match) return controlPointsForGsapEase("power2.out");
+  const data = match[1];
+  const nums = data.match(/[\d.]+/g)?.map(Number);
+  if (!nums || nums.length < 6) return controlPointsForGsapEase("power2.out");
+  return { x1: nums[2], y1: nums[3], x2: nums[4], y2: nums[5] };
+}
+
+export const ADD_METHODS = ["to", "from", "set"] as const;
+
+export const ADD_METHOD_LABELS: Record<string, string> = {
+  to: "Animate",
+  from: "Animate In",
+  set: "Set Instantly",
+};

package/src/components/editor/manualEditingAvailability.ts

@@ -65,6 +65,12 @@ export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
+export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
+  false,
+);
+
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";

package/src/components/editor/manualEdits.test.ts

@@ -516,3 +516,104 @@ describe("studio manual edits", () => {
     expect(frames).toHaveLength(0);
   });
 });
+
+describe("applyStudioPathOffset sets correct attribute name", () => {
+  it("sets data-hf-studio-path-offset without double data- prefix", () => {
+    const window = new Window();
+    const el = window.document.createElement("div");
+    window.document.body.append(el);
+
+    applyStudioPathOffset(el, { x: 100, y: 50 });
+
+    expect(el.getAttribute("data-hf-studio-path-offset")).toBe("true");
+    expect(el.getAttribute("data-data-hf-studio-path-offset")).toBeNull();
+  });
+
+  it("stores offset in CSS vars alongside the attribute marker", () => {
+    const window = new Window();
+    const el = window.document.createElement("div");
+    window.document.body.append(el);
+
+    applyStudioPathOffset(el, { x: 50, y: 25 });
+
+    expect(el.getAttribute("data-hf-studio-path-offset")).toBe("true");
+    expect(el.style.getPropertyValue(STUDIO_OFFSET_X_PROP)).toBe("50px");
+    expect(el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)).toBe("25px");
+    expect(el.style.getPropertyValue("translate")).toContain(STUDIO_OFFSET_X_PROP);
+  });
+
+  it("corrects offset applied on top of legacy double-prefix element", () => {
+    const window = new Window();
+    const el = window.document.createElement("div");
+    el.setAttribute("data-data-hf-studio-path-offset", "true");
+    el.style.setProperty(STUDIO_OFFSET_X_PROP, "200px");
+    el.style.setProperty(STUDIO_OFFSET_Y_PROP, "-30px");
+    window.document.body.append(el);
+
+    applyStudioPathOffset(el, { x: 200, y: -30 });
+
+    expect(el.getAttribute("data-hf-studio-path-offset")).toBe("true");
+    expect(readStudioPathOffset(el)).toEqual({ x: 200, y: -30 });
+    expect(el.style.getPropertyValue("translate")).toContain(STUDIO_OFFSET_X_PROP);
+  });
+});
+
+describe("applyStudioPathOffset strips GSAP double-counted translate", () => {
+  it("strips GSAP transform translate when applying offset", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    window.document.body.append(element);
+
+    // Simulate GSAP having baked translate into the transform matrix
+    element.style.setProperty("transform", "matrix(1, 0, 0, 1, 200, 0)");
+
+    applyStudioPathOffset(element, { x: 200, y: 0 });
+
+    // The transform translate should be stripped (GSAP's 200px removed)
+    const transform = element.style.getPropertyValue("transform");
+    if (transform && transform !== "none") {
+      const m = new window.DOMMatrix(transform);
+      expect(m.m41).toBe(0);
+      expect(m.m42).toBe(0);
+    }
+    // The offset should be stored in CSS vars
+    expect(readStudioPathOffset(element).x).toBe(200);
+  });
+
+  it("subtracts only the studio offset from GSAP transform, preserving animation values", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    window.document.body.append(element);
+
+    // GSAP has scale + baked translate (offset 50) + animation contribution (-70)
+    // Total m42 = 50 + (-70) = -20
+    element.style.setProperty("transform", "matrix(0.5, 0, 0, 0.5, 0, -20)");
+
+    applyStudioPathOffset(element, { x: 0, y: 50 });
+
+    const transform = element.style.getPropertyValue("transform");
+    if (transform && transform !== "none") {
+      const m = new window.DOMMatrix(transform);
+      expect(m.a).toBeCloseTo(0.5);
+      expect(m.d).toBeCloseTo(0.5);
+      // Only the studio offset (50) is subtracted, animation contribution (-70) preserved
+      expect(m.m41).toBe(0);
+      expect(m.m42).toBe(-70);
+    }
+    expect(readStudioPathOffset(element).y).toBe(50);
+  });
+
+  it("offset survives repeated applyStudioPathOffset calls without drift", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    window.document.body.append(element);
+
+    // Apply offset 3 times with same value (simulates reapply hook firing multiple times)
+    applyStudioPathOffset(element, { x: 100, y: -20 });
+    applyStudioPathOffset(element, { x: 100, y: -20 });
+    applyStudioPathOffset(element, { x: 100, y: -20 });
+
+    expect(readStudioPathOffset(element).x).toBe(100);
+    expect(readStudioPathOffset(element).y).toBe(-20);
+  });
+});

package/src/components/editor/manualEdits.ts

@@ -3,9 +3,7 @@ export {
   STUDIO_OFFSET_X_PROP,
   STUDIO_OFFSET_Y_PROP,
   STUDIO_WIDTH_PROP,
-  STUDIO_HEIGHT_PROP,
   STUDIO_ROTATION_PROP,
-  type StudioManualEditSeekWindow,
   type StudioBoxSizeSnapshot,
   type StudioRotationSnapshot,
   type StudioPathOffsetSnapshot,
@@ -20,7 +18,6 @@ export {
   readStudioPathOffset,
   readStudioBoxSize,
   readStudioRotation,
-  readGsapTranslateFromTransform,
   applyStudioPathOffset,
   applyStudioPathOffsetDraft,
   applyStudioBoxSize,
@@ -28,8 +25,6 @@ export {
   applyStudioRotation,
   applyStudioRotationDraft,
   reapplyPositionEditsAfterSeek,
-  buildMotionPatches,
-  buildClearMotionPatches,
 } from "./manualEditsDom";
 
 export {
@@ -51,7 +46,6 @@ import {
   STUDIO_MANUAL_EDITS_PLAYBACK_FRAME_PROP,
 } from "./manualEditsTypes";
 import { finiteNumber } from "./manualEditsParsing";
-import { isStudioManualEditGestureActive } from "./manualEditsDom";
 
 /* ── Seek/play reapply wrappers ───────────────────────────────────── */
 function markWrapped(fn: (...args: unknown[]) => unknown): void {
@@ -262,6 +256,28 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
       wrapApplyAfterFunction(studioWin, timeline, "pause") || wrappedNamedTimelinePause;
   }
 
+  // Auto-wrap timelines registered AFTER this install runs. GSAP compositions
+  // register via `window.__timelines[id] = tl` which may happen after the
+  // Studio hook runs. The Proxy intercepts new registrations and wraps
+  // seek/play/pause immediately, closing the gap that causes translate doubling.
+  if (studioWin.__timelines && !(studioWin.__timelines as Record<string, unknown>).__proxied) {
+    const original = studioWin.__timelines;
+    studioWin.__timelines = new Proxy(original, {
+      set(target, prop, value) {
+        target[prop as string] = value;
+        if (typeof value === "object" && value !== null) {
+          const tl = value as Record<string, unknown>;
+          wrapSeekReapplyFunction(studioWin, tl, "seek");
+          wrapPlayReapplyFunction(studioWin, tl, "play");
+          wrapApplyAfterFunction(studioWin, tl, "pause");
+          studioWin.__hfStudioManualEditsApply?.();
+        }
+        return true;
+      },
+    });
+    (studioWin.__timelines as Record<string, unknown>).__proxied = true;
+  }
+
   if (isStudioManualEditPlaybackActive(studioWin)) {
     startStudioManualEditPlaybackReapply(studioWin);
   }
@@ -280,6 +296,3 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
     wrappedNamedTimelinePause
   );
 }
-
-// Re-export for internal use (seek hooks need this)
-export { isStudioManualEditGestureActive };

package/src/components/editor/manualEditsDom.ts

@@ -48,7 +48,7 @@ export function endStudioManualEditGesture(element: HTMLElement, token?: string)
   element.removeAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
 }
 
-export function isStudioManualEditGestureActive(element: HTMLElement): boolean {
+function isStudioManualEditGestureActive(element: HTMLElement): boolean {
   return element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
 }
 
@@ -213,26 +213,15 @@ function writeStudioPathOffsetVars(
 
 // GSAP 3.x reads the resolved CSS `translate` individual property at initialization and bakes it
 // into element.style.transform (as a matrix) on every seek. When the studio's reapply hook also
-// writes `translate`, both properties compose additively, doubling the visual offset. This helper
-// zeroes out only the translate component (m41/m42) so the `translate` prop isn't double-counted.
+// writes `translate`, both properties compose additively, doubling the visual offset.
+//
+// This helper subtracts only the baked studio offset from m41/m42, preserving any GSAP animation
+// contribution (e.g. a tween animating y: -20). The studio offset is read from the CSS custom
+// properties which tell us exactly how much was baked from the CSS translate.
 function isIdentityAfterTranslateStrip(m: DOMMatrix): boolean {
   return m.is2D && m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1;
 }
 
-export function readGsapTranslateFromTransform(element: HTMLElement): { x: number; y: number } {
-  const transform = element.style.getPropertyValue("transform");
-  if (!transform || transform === "none") return { x: 0, y: 0 };
-  const DOMMatrixCtor = (element.ownerDocument.defaultView as (Window & typeof globalThis) | null)
-    ?.DOMMatrix;
-  if (!DOMMatrixCtor) return { x: 0, y: 0 };
-  try {
-    const m = new DOMMatrixCtor(transform);
-    return { x: m.m41, y: m.m42 };
-  } catch {
-    return { x: 0, y: 0 };
-  }
-}
-
 function stripGsapTranslateFromTransform(element: HTMLElement): void {
   const transform = element.style.getPropertyValue("transform");
   if (!transform || transform === "none") return;
@@ -242,9 +231,11 @@ function stripGsapTranslateFromTransform(element: HTMLElement): void {
   try {
     const m = new DOMMatrixCtor(transform);
     if (m.m41 === 0 && m.m42 === 0) return;
-    m.m41 = 0;
-    m.m42 = 0;
-    if (isIdentityAfterTranslateStrip(m)) {
+    const offsetX = readPxCustomProperty(element, STUDIO_OFFSET_X_PROP);
+    const offsetY = readPxCustomProperty(element, STUDIO_OFFSET_Y_PROP);
+    m.m41 -= offsetX;
+    m.m42 -= offsetY;
+    if (Math.abs(m.m41) < 0.01 && Math.abs(m.m42) < 0.01 && isIdentityAfterTranslateStrip(m)) {
       element.style.removeProperty("transform");
     } else {
       element.style.setProperty("transform", m.toString());
@@ -493,9 +484,19 @@ export {
 function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
   const ctor = doc.defaultView?.HTMLElement;
   if (!ctor) return [];
-  return Array.from(doc.querySelectorAll(`[${attr}="true"]`)).filter(
+  const elements = Array.from(doc.querySelectorAll(`[${attr}="true"]`)).filter(
     (el): el is HTMLElement => el instanceof ctor,
   );
+  // Handle legacy HTML files where attributes were persisted with a double data- prefix
+  const legacyAttr = `data-${attr}`;
+  for (const el of doc.querySelectorAll(`[${legacyAttr}="true"]`)) {
+    if (el instanceof ctor && !el.hasAttribute(attr)) {
+      el.setAttribute(attr, "true");
+      el.removeAttribute(legacyAttr);
+      elements.push(el);
+    }
+  }
+  return elements;
 }
 
 function reapplyPathOffsets(doc: Document): void {

package/src/components/editor/manualOffsetDrag.test.ts

@@ -1,8 +1,10 @@
 import { Window } from "happy-dom";
 import { describe, expect, it } from "vitest";
 import {
+  applyManualOffsetDragCommit,
   applyManualOffsetDragMatrix,
   createManualOffsetDragMember,
+  endManualOffsetDragMembers,
   invertManualOffsetDragMatrix,
   measureManualOffsetDragScreenToOffsetMatrix,
   resolveManualOffsetForPointerDelta,
@@ -140,8 +142,8 @@ describe("measureManualOffsetDragScreenToOffsetMatrix", () => {
   });
 });
 
-describe("createManualOffsetDragMember GSAP translate compensation", () => {
-  it("folds GSAP translate from element.style.transform into initialOffset", () => {
+describe("createManualOffsetDragMember uses raw CSS var offset", () => {
+  it("ignores GSAP transform — initialOffset comes from CSS vars only", () => {
     const window = new Window();
     const element = window.document.createElement("div");
     window.document.body.append(element);
@@ -164,14 +166,18 @@ describe("createManualOffsetDragMember GSAP translate compensation", () => {
     expect(result.ok).toBe(true);
     if (!result.ok) return;
     expect(result.member.initialOffset.x).toBe(0);
-    expect(result.member.initialOffset.y).toBe(-20);
+    expect(result.member.initialOffset.y).toBe(0);
   });
 
-  it("leaves initialOffset unchanged when no GSAP transform is present", () => {
+  it("reads only the CSS var offset, not GSAP transform", () => {
     const window = new Window();
     const element = window.document.createElement("div");
     window.document.body.append(element);
 
+    element.style.setProperty(STUDIO_OFFSET_X_PROP, "30px");
+    element.style.setProperty(STUDIO_OFFSET_Y_PROP, "10px");
+    element.style.setProperty("transform", "translate(50px, -15px)");
+
     element.getBoundingClientRect = () => {
       const offsetX = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
       const offsetY = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) || 0;
@@ -187,35 +193,42 @@ describe("createManualOffsetDragMember GSAP translate compensation", () => {
 
     expect(result.ok).toBe(true);
     if (!result.ok) return;
-    expect(result.member.initialOffset.x).toBe(0);
-    expect(result.member.initialOffset.y).toBe(0);
+    expect(result.member.initialOffset.x).toBe(30);
+    expect(result.member.initialOffset.y).toBe(10);
   });
 
-  it("combines existing manual offset with GSAP translate", () => {
+  it("does not accumulate drift across multiple drag cycles", () => {
     const window = new Window();
     const element = window.document.createElement("div");
     window.document.body.append(element);
 
-    element.style.setProperty(STUDIO_OFFSET_X_PROP, "30px");
-    element.style.setProperty(STUDIO_OFFSET_Y_PROP, "10px");
-    element.style.setProperty("transform", "translate(50px, -15px)");
-
     element.getBoundingClientRect = () => {
       const offsetX = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
       const offsetY = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) || 0;
       return new window.DOMRect(10 + offsetX, 20 + offsetY, 100, 50);
     };
 
-    const result = createManualOffsetDragMember({
-      key: "test",
-      selection: { element } as never,
-      element,
-      rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
-    });
-
-    expect(result.ok).toBe(true);
-    if (!result.ok) return;
-    expect(result.member.initialOffset.x).toBe(80);
-    expect(result.member.initialOffset.y).toBe(-5);
+    // Simulate GSAP baking a translate into transform each cycle
+    for (let cycle = 0; cycle < 3; cycle++) {
+      element.style.setProperty("transform", `translate(${50 * (cycle + 1)}px, 0px)`);
+
+      const result = createManualOffsetDragMember({
+        key: "test",
+        selection: { element } as never,
+        element,
+        rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
+      });
+
+      expect(result.ok).toBe(true);
+      if (!result.ok) return;
+      // initialOffset should always be the CSS var value, never inflated by GSAP transform
+      const currentRawX =
+        Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
+      expect(result.member.initialOffset.x).toBe(currentRawX);
+
+      // Simulate drag commit: apply a small offset
+      applyManualOffsetDragCommit(result.member, 10, 0);
+      endManualOffsetDragMembers([result.member]);
+    }
   });
 });

package/src/components/editor/manualOffsetDrag.ts

@@ -5,7 +5,6 @@ import {
   beginStudioManualEditGesture,
   captureStudioPathOffset,
   endStudioManualEditGesture,
-  readGsapTranslateFromTransform,
   readStudioPathOffset,
   restoreStudioPathOffset,
   type StudioPathOffsetSnapshot,
@@ -232,12 +231,7 @@ export function createManualOffsetDragMember(input: {
   element: HTMLElement;
   rect: ManualOffsetDragRect;
 }): ManualOffsetDragMemberResult {
-  const rawOffset = readStudioPathOffset(input.element);
-  const gsapTranslate = readGsapTranslateFromTransform(input.element);
-  const initialOffset = {
-    x: rawOffset.x + gsapTranslate.x,
-    y: rawOffset.y + gsapTranslate.y,
-  };
+  const initialOffset = readStudioPathOffset(input.element);
   const initialPathOffset = captureStudioPathOffset(input.element);
   const gestureToken = beginStudioManualEditGesture(input.element);
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset);