fix(studio): an entrance rewritten at the playhead still shows its start state before it starts

packages/parsers/src/gsapWriterAcorn.ts

@@ -1828,6 +1828,9 @@ export function replaceTweenWithKeyframesInScript(
   const parts = [`keyframes: ${buildKeyframeObjectCode(sorted, edit.easeEach)}`, ...kept];
   parts.push(`duration: ${valueToCode(edit.duration)}`);
   if (edit.ease) parts.push(`ease: ${JSON.stringify(edit.ease)}`);
+  const entrance = animation.method === "from" || animation.method === "fromTo";
+  if (entrance && !kept.some((e) => /^\s*immediateRender\s*:/.test(e)))
+    parts.push("immediateRender: true");
   if (animation.hasUnresolvedSelector || animation.targetSelector !== edit.targetSelector) {
     const selectorArg = call.node.arguments[0];
     ms.overwrite(selectorArg.start, selectorArg.end, JSON.stringify(edit.targetSelector));

packages/studio/src/hooks/gsapEntranceRewrite.test.ts

@@ -0,0 +1,48 @@
+// @vitest-environment happy-dom
+import { parseGsapScriptAcornForWrite } from "@hyperframes/parsers/gsap-parser-acorn";
+import { replaceTweenWithKeyframesInScript } from "@hyperframes/parsers/gsap-writer-acorn";
+import { gsap } from "gsap";
+import { afterEach, describe, expect, it } from "vitest";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+/** Runs `script` with real GSAP and reads the box's x and opacity at `time`. */
+function boxAt(script: string, time: number) {
+  document.body.innerHTML = `<div id="entrance"></div>`;
+  const tl = new Function("gsap", `${script}\nreturn tl;`)(gsap) as gsap.core.Timeline;
+  tl.seek(time);
+  const box = document.getElementById("entrance")!;
+  const read = { x: gsap.getProperty(box, "x"), opacity: gsap.getProperty(box, "opacity") };
+  tl.kill();
+  return read;
+}
+
+describe("an entrance rewritten as keyframes at the playhead", () => {
+  it.each([
+    ["from()", `tl.from("#entrance", { x: -60, opacity: 0, duration: 1, ease: "none" }, 1);`],
+    [
+      "fromTo()",
+      `tl.fromTo("#entrance", { x: -60, opacity: 0 }, { x: 0, opacity: 1, duration: 1, ease: "none" }, 1);`,
+    ],
+  ])("still shows its start state before it starts, after a %s", (_, call) => {
+    const script = `const tl = gsap.timeline({ paused: true });\n${call}`;
+    const id = parseGsapScriptAcornForWrite(script)!.located[0]!.id;
+    const edited = replaceTweenWithKeyframesInScript(script, id, {
+      targetSelector: "#entrance",
+      position: 1,
+      duration: 1,
+      keyframes: [
+        { percentage: 0, properties: { x: -60, opacity: 0 } },
+        { percentage: 50, properties: { x: -20, opacity: 0.5 } },
+        { percentage: 100, properties: { x: 0, opacity: 1 } },
+      ],
+      easeEach: "none",
+    })!;
+
+    expect(boxAt(script, 0.5)).toEqual({ x: -60, opacity: 0 });
+    expect(boxAt(edited, 0.5)).toEqual({ x: -60, opacity: 0 });
+    expect(boxAt(edited, 1.5)).toEqual({ x: -20, opacity: 0.5 });
+  });
+});