fix(studio): a rotate GSAP does not own saves the element's own CSS rotate

Author: miguel-heygen

packages/studio/src/components/editor/domEditOverlayGestures.ts

@@ -63,6 +63,9 @@ export interface GestureState {
   actualWidth: number;
   actualHeight: number;
   actualRotation: number;
+  /** GSAP turns nothing on the element: what its scale and transform turn, read once, so the
+   *  rotate draws and saves only the rest as its own CSS `rotate`. Null: GSAP's rotation. */
+  plainRotationShare: number | null;
   editScaleX: number;
   editScaleY: number;
   // Rendered-per-CSS-pixel factor of the element itself at gesture start (a GSAP

packages/studio/src/components/editor/domEditOverlayStartGesture.ts

@@ -31,6 +31,8 @@ import {
   type UseDomEditOverlayGesturesOptions,
 } from "./domEditOverlayGestures";
 import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection";
+import { gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
+import { readCssRotation } from "../../hooks/draggedGsapPosition";
 import { logResize, resetResizeMoveLog } from "../../utils/resizeDebug";
 import { logDrag, readDragPositions, resetDragMoveLog } from "../../utils/dragDebug";
 
@@ -151,10 +153,11 @@ export function startGesture(
     return false;
 
   const size = readStudioBoxSize(sel.element);
-  // Single-source rotation base: GSAP's rotation plus any legacy `--hf-studio-rotation`, or
-  // without GSAP the CSS fold, so a rotate gesture starts from the element's visual angle
-  // and commits an absolute angle to the timeline.
-  const rotation = { angle: readRotationBase(sel.element) };
+  // The rotate starts from the angle the element shows and commits an absolute one.
+  const plainRotationShare = gsapWritesRotation(sel.element)
+    ? null
+    : readCssRotation(sel.element, false);
+  const rotation = { angle: readRotationBase(sel.element, plainRotationShare !== null) };
   // The draft writes CSS width/height, so the resize base must be the CSS
   // layout size. offsetWidth/Height are transform-free; the overlay-rect
   // fallback (rect / editScale) includes the element's own GSAP scale and
@@ -280,6 +283,7 @@ export function startGesture(
     actualWidth,
     actualHeight,
     actualRotation: rotation.angle,
+    plainRotationShare,
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
     contentScaleX,

packages/studio/src/components/editor/manualEditsDomPatches.test.ts

@@ -46,7 +46,6 @@ import {
   buildClearPathOffsetPatches,
   buildBoxSizePatches,
   buildClearBoxSizePatches,
-  buildRotationPatches,
   buildClearRotationPatches,
   buildMotionPatches,
   buildClearMotionPatches,
@@ -335,45 +334,7 @@ describe("anchored-corner combined patch: [...buildBoxSizePatches, ...buildPathO
 
 /* ── Rotation ────────────────────────────────────────────────────────────── */
 
-describe("buildRotationPatches / buildClearRotationPatches", () => {
-  function populatedRotEl(): HTMLElement {
-    const e = div();
-    e.style.setProperty(STUDIO_ROTATION_PROP, "45");
-    e.style.setProperty("rotate", "45deg");
-    e.style.setProperty("transform-origin", "left center");
-    e.style.setProperty("display", "block");
-    e.setAttribute(STUDIO_ORIGINAL_ROTATE_ATTR, "0deg");
-    e.setAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, "0deg");
-    e.setAttribute(STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, "center center");
-    e.setAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, "flex");
-    return e;
-  }
-
-  it("populated: captures rotation styles, attrs, and transform-display marker in declaration order", () => {
-    const ops = buildRotationPatches(populatedRotEl());
-    expect(ops).toEqual([
-      { type: "inline-style", property: STUDIO_ROTATION_PROP, value: "45" },
-      { type: "inline-style", property: "rotate", value: "45deg" },
-      { type: "inline-style", property: "transform-origin", value: "left center" },
-      { type: "inline-style", property: "display", value: "block" },
-      { type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" },
-      { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: "0deg" },
-      { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: "0deg" },
-      {
-        type: "attribute",
-        property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
-        value: "center center",
-      },
-      { type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: "flex" },
-    ]);
-  });
-
-  it("empty: bare element yields only the rotation marker", () => {
-    expect(buildRotationPatches(div())).toEqual([
-      { type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" },
-    ]);
-  });
-
+describe("buildClearRotationPatches", () => {
   it("clear: restores rotate and transform-origin from orig attrs, nulls draft attr", () => {
     const e = div();
     e.setAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, "30deg");
@@ -405,11 +366,6 @@ describe("buildRotationPatches / buildClearRotationPatches", () => {
     const ops = buildClearRotationPatches(e);
     expect(ops.find((o) => o.property === "rotate")?.value).toBeNull();
   });
-
-  it("build/clear symmetry: clear addresses every {type,property} key that build emits", () => {
-    const e = populatedRotEl();
-    assertClearCoversKeys(buildRotationPatches(e), buildClearRotationPatches(e));
-  });
 });
 
 /* ── Motion ──────────────────────────────────────────────────────────────── */

packages/studio/src/components/editor/manualEditsDomPatches.ts

@@ -185,28 +185,6 @@ export function buildClearBoxSizePatches(element: HTMLElement): PatchOperation[]
 
 /* ── Rotation patches ────────────────────────────────────────────── */
 
-const ROTATION_STYLE_PROPS = [
-  STUDIO_ROTATION_PROP,
-  "rotate",
-  "transform-origin",
-  "display",
-] as const;
-
-const ROTATION_ORIG_ATTRS = [
-  STUDIO_ORIGINAL_ROTATE_ATTR,
-  STUDIO_ORIGINAL_INLINE_ROTATE_ATTR,
-  STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
-  STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
-] as const;
-
-export function buildRotationPatches(element: HTMLElement): PatchOperation[] {
-  const ops: PatchOperation[] = [];
-  collectInlineStyleOps(element, ROTATION_STYLE_PROPS, ops);
-  ops.push({ type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" });
-  collectAttributeOps(element, ROTATION_ORIG_ATTRS, ops);
-  return ops;
-}
-
 export function buildClearRotationPatches(element: HTMLElement): PatchOperation[] {
   const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
   const origRotationTransformOrigin = element.getAttribute(

packages/studio/src/components/editor/manualOffsetDrag.test.ts

@@ -1,5 +1,5 @@
 import { Window } from "happy-dom";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
   applyManualOffsetDragCommit,
   resumeGsapTimelines,
@@ -16,7 +16,7 @@ import {
   type ManualOffsetDragMatrix,
 } from "./manualOffsetDrag";
 import { STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP } from "./manualEdits";
-import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
+import { computeDraggedGsapPosition, readCssRotation } from "../../hooks/draggedGsapPosition";
 
 function expectMatrixClose(actual: ManualOffsetDragMatrix, expected: ManualOffsetDragMatrix): void {
   expect(actual.a).toBeCloseTo(expected.a, 6);
@@ -646,9 +646,9 @@ describe("rotate in a composition without GSAP", () => {
     const element = window.document.createElement("h1");
     element.id = "title";
     window.document.body.append(element);
-    const base = readRotationBase(element);
+    const base = readRotationBase(element, true);
     expect(base).toBeCloseTo(30);
-    applyRotationDraft(element, 55);
+    applyRotationDraft(element, 55, readCssRotation(element, false));
     expect(element.style.getPropertyValue("rotate")).toBe("55deg");
   });
 
@@ -665,10 +665,34 @@ describe("rotate in a composition without GSAP", () => {
       const element = window.document.createElement("h1");
       element.id = "title";
       window.document.body.append(element);
-      expect({ css, base: readRotationBase(element) }).toEqual({ css, base: expect.closeTo(base) });
-      applyRotationDraft(element, base + 25);
+      expect({ css, base: readRotationBase(element, true) }).toEqual({
+        css,
+        base: expect.closeTo(base),
+      });
+      applyRotationDraft(element, base + 25, readCssRotation(element, false));
       const rotate = Number.parseFloat(element.style.getPropertyValue("rotate"));
       expect({ css, rotate }).toEqual({ css, rotate: expect.closeTo(drafted) });
     }
   });
+
+  it("never asks GSAP, nor restyles per frame, when GSAP turns nothing on the element", () => {
+    const window = new Window();
+    const gsap = { set: vi.fn(), getProperty: vi.fn(() => 0) };
+    Object.assign(window, { gsap });
+    window.document.head.innerHTML = "<style>#title { rotate: 30deg; }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    expect(readRotationBase(element, true)).toBeCloseTo(30);
+    const share = readCssRotation(element, false);
+    const styleReads = vi.spyOn(window, "getComputedStyle");
+    applyRotationDraft(element, 55, share);
+    expect(styleReads).not.toHaveBeenCalled();
+    expect(element.style.getPropertyValue("rotate")).toBe("55deg");
+    expect(gsap.set).not.toHaveBeenCalled();
+    expect(gsap.getProperty).not.toHaveBeenCalled();
+    applyRotationDraft(element, 55, null);
+    expect(element.style.getPropertyValue("rotate")).toBe("none");
+    expect(gsap.set).toHaveBeenCalledWith(element, { rotation: 55 });
+  });
 });

packages/studio/src/components/editor/manualOffsetDrag.ts

@@ -16,6 +16,7 @@ import {
 import { computeDraggedGsapPosition, readCssRotation } from "../../hooks/draggedGsapPosition";
 import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, writeTranslatePx } from "./plainTranslate";
+import { roundTo3 } from "../../utils/rounding";
 
 interface OffsetDragGsap {
   set: (el: Element, vars: Record<string, number | string>) => void;
@@ -56,32 +57,47 @@ function applyOffsetDragDraftViaGsap(
   return true;
 }
 
-// The rotation draft shows the absolute angle the commit writes: GSAP's rotation, or without GSAP a
-// CSS `rotate` of the angle less what `scale` and `transform` already turn.
-export function applyRotationDraft(element: HTMLElement, angle: number): void {
-  const gsap = getOffsetDragGsap(element);
-  element.style.setProperty(
-    "rotate",
-    gsap ? "none" : `${angle - readCssRotation(element, false)}deg`,
-  );
-  gsap?.set(element, { rotation: angle });
+/** The element's own `rotate` that shows `angle`, less `share`, what its `scale` and `transform` turn. */
+export function applyCssRotation(
+  element: HTMLElement,
+  angle: number,
+  share = readCssRotation(element, false),
+): void {
+  element.style.setProperty("rotate", `${roundTo3(angle - share)}deg`);
+}
+
+// `plainShare` is decided once, at gesture start: a number when GSAP turns nothing on the element (the
+// rotate draws its own CSS `rotate`), null for GSAP's rotation, as the commit writes it.
+export function applyRotationDraft(
+  element: HTMLElement,
+  angle: number,
+  plainShare: number | null,
+): void {
+  const gsap = plainShare === null ? getOffsetDragGsap(element) : null;
+  if (!gsap) return applyCssRotation(element, angle, plainShare ?? undefined);
+  element.style.setProperty("rotate", "none");
+  gsap.set(element, { rotation: angle });
 }
 
+const rotationGsap = (element: HTMLElement, plain: boolean) =>
+  plain ? null : getOffsetDragGsap(element);
+
 /** Back to the gesture start: the CSS snapshot, and GSAP's rotation without the legacy var. */
 export function restoreRotationDraft(
   element: HTMLElement,
   angle: number,
   snapshot: StudioRotationSnapshot,
+  plain: boolean,
 ): void {
-  getOffsetDragGsap(element)?.set(element, {
+  rotationGsap(element, plain)?.set(element, {
     rotation: angle - (Number.parseFloat(snapshot.studioRotation) || 0),
   });
   restoreStudioRotation(element, snapshot);
 }
 
 /** The angle a rotate gesture starts from, as the element shows it. */
-export function readRotationBase(element: HTMLElement): number {
-  const gsap = getOffsetDragGsap(element);
+export function readRotationBase(element: HTMLElement, plain: boolean): number {
+  const gsap = rotationGsap(element, plain);
   if (!gsap) return readCssRotation(element);
   return Number(gsap.getProperty(element, "rotation")) + readStudioRotation(element).angle;
 }

packages/studio/src/components/editor/useDomEditOverlayGestures.ts

@@ -164,7 +164,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualAngle: g.actualRotation,
         snap: e.shiftKey,
       });
-      applyRotationDraft(sel.element, rotated.angle);
+      applyRotationDraft(sel.element, rotated.angle, g.plainRotationShare);
       return;
     }
 
@@ -418,14 +418,19 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         snap: e.shiftKey,
       });
       const restoreRotation = () =>
-        restoreRotationDraft(sel.element, g.actualRotation, g.initialRotation);
+        restoreRotationDraft(
+          sel.element,
+          g.actualRotation,
+          g.initialRotation,
+          g.plainRotationShare !== null,
+        );
       if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
       }
       // Hold the final angle while the commit lands.
-      applyRotationDraft(sel.element, finalRotation.angle);
+      applyRotationDraft(sel.element, finalRotation.angle, g.plainRotationShare);
       void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation))
         .catch((error) => {
           logGestureCommitFailure("rotate commit failed", error);
@@ -543,7 +548,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "rotation" && sel) {
-      restoreRotationDraft(sel.element, g.actualRotation, g.initialRotation);
+      restoreRotationDraft(
+        sel.element,
+        g.actualRotation,
+        g.initialRotation,
+        g.plainRotationShare !== null,
+      );
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
     }
     opts.blockedMoveRef.current = null;

packages/studio/src/hooks/gsapRuntimeBridge.ts

@@ -35,7 +35,11 @@ import {
   pickClosestToPlayhead,
   readGsapPositionFromIframe,
 } from "./gsapPositionDetection";
-import { hasNonHoldTweenForElement, POSITION_CHANNELS } from "./gsapRuntimeKeyframes";
+import {
+  hasNonHoldTweenForElement,
+  POSITION_CHANNELS,
+  ROTATION_CHANNELS,
+} from "./gsapRuntimeKeyframes";
 import { getAnimationsForElement } from "./gsapElementMatch";
 import {
   animationWritesAnyProperty,
@@ -46,7 +50,6 @@ import {
 export { POSITION_CHANNELS };
 const POSITION_CHANNEL_SET = new Set<string>(POSITION_CHANNELS);
 
-const ROTATION_CHANNELS: string[] = ["rotation", "rotationX", "rotationY", "rotationZ"];
 const ROTATION_CHANNEL_SET = new Set<string>(ROTATION_CHANNELS);
 
 // ── Property-group tween resolution ───────────────────────────────────────

packages/studio/src/hooks/gsapRuntimeKeyframes.ts

@@ -433,11 +433,20 @@ function gsapWritesChannels(el: Element, channels: string[]): boolean {
   );
 }
 
+export const ROTATION_CHANNELS: string[] = ["rotation", "rotationX", "rotationY", "rotationZ"];
+
+const gsapRendersTransform = (el: Element) =>
+  !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
+
 /** GSAP owns this element's position: a tween or hold writes it, or GSAP already renders its
  *  transform (a CSS translate would then apply twice). Everything else moves by plain CSS. */
 export function gsapWritesPosition(el: Element): boolean {
-  const cache = (el as { _gsap?: { renderTransform?: unknown } })._gsap;
-  return !!cache?.renderTransform || gsapWritesChannels(el, MOVE_CHANNELS);
+  return gsapRendersTransform(el) || gsapWritesChannels(el, MOVE_CHANNELS);
+}
+
+/** `gsapWritesPosition` for a rotate: everything else turns by its own CSS `rotate`. */
+export function gsapWritesRotation(el: Element): boolean {
+  return gsapRendersTransform(el) || gsapWritesChannels(el, ROTATION_CHANNELS);
 }
 
 /** `hasNonHoldTweenForElement` for an element in hand, read from its own window's timelines. */