diff --git a/packages/studio/src/components/editor/gsapAnimationConstants.ts b/packages/studio/src/components/editor/gsapAnimationConstants.ts index 04a401d89..a285d0536 100644 --- a/packages/studio/src/components/editor/gsapAnimationConstants.ts +++ b/packages/studio/src/components/editor/gsapAnimationConstants.ts @@ -20,6 +20,12 @@ export const PROP_LABELS: Record = { width: "Width", height: "Height", rotation: "Rotate", + z: "Move Z", + rotationX: "Rotate X", + rotationY: "Rotate Y", + rotationZ: "Rotate Z", + perspective: "Perspective", + transformOrigin: "Transform Origin", opacity: "Opacity", scale: "Scale", scaleX: "Scale X", @@ -46,6 +52,12 @@ export const PROP_UNITS: Record = { width: "px", height: "px", rotation: "°", + z: "px", + rotationX: "°", + rotationY: "°", + rotationZ: "°", + perspective: "px", + transformOrigin: "", opacity: "%", scale: "×", scaleX: "×", @@ -62,6 +74,13 @@ export const PROP_TOOLTIPS: Record = { scaleX: "Horizontal stretch (1 = normal)", scaleY: "Vertical stretch (1 = normal)", rotation: "Spin angle (360 = full rotation)", + z: "Move forward/back along the Z axis", + rotationX: "Rotate around the horizontal X axis", + rotationY: "Rotate around the vertical Y axis", + rotationZ: "Rotate around the screen-facing Z axis", + perspective: + "3D depth context for child elements; set it on a parent when rotating children in 3D", + transformOrigin: "Pivot point for transforms, for example center center or 50% 50%", width: "Element width", height: "Element height", autoAlpha: "Like opacity but hides element completely at 0", @@ -147,6 +166,11 @@ export const PROP_CONSTRAINTS: Record): GsapAnimation { @@ -23,6 +25,27 @@ describe("buildTweenSummary", () => { expect(s).toContain("move x"); }); + it("describes 3D transform tweens with labels and units", () => { + const s = buildTweenSummary( + anim({ + properties: { + z: 120, + rotationX: 45, + rotationY: -30, + rotationZ: 90, + perspective: 800, + transformOrigin: "50% 50%", + }, + }), + ); + expect(s).toContain("move z to 120px"); + expect(s).toContain("rotate x to 45°"); + expect(s).toContain("rotate y to -30°"); + expect(s).toContain("rotate z to 90°"); + expect(s).toContain("perspective to 800px"); + expect(s).toContain("transform origin to 50% 50%"); + }); + it("describes a from tween", () => { const s = buildTweenSummary(anim({ method: "from", properties: { opacity: 0 } })); expect(s).toContain("enters from"); @@ -65,3 +88,9 @@ describe("buildTweenSummary", () => { expect(s).toContain("no properties yet"); }); }); + +describe("PROP_LABELS", () => { + it("provides labels for every inspector-supported GSAP property", () => { + expect(SUPPORTED_PROPS.filter((prop) => !PROP_LABELS[prop])).toEqual([]); + }); +});