From f3764e86b6da8de4e790404d0a3ffca68824de15 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Wed, 23 Sep 2026 02:12:26 -0400
Subject: [PATCH] fix(skills): transition snippets reveal the incoming scene on
 every seek path

---
 skills/hyperframes-animation/transitions/catalog.md  | 4 ++++
 skills/hyperframes-animation/transitions/css-push.md | 8 ++++----
 skills/hyperframes-animation/transitions/overview.md | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/skills/hyperframes-animation/transitions/catalog.md b/skills/hyperframes-animation/transitions/catalog.md
index bbcf35dbd6..b0454a5493 100644
--- a/skills/hyperframes-animation/transitions/catalog.md
+++ b/skills/hyperframes-animation/transitions/catalog.md
@@ -92,6 +92,8 @@ Shader setup, WebGL init, capture, and fragment shaders are handled by `@hyperfr
         data-start="0"
         data-duration="T + D"
         data-track-index="0"
+        data-width="1920"
+        data-height="1080"
       ></div>
       <div
         id="scene2"
@@ -101,6 +103,8 @@ Shader setup, WebGL init, capture, and fragment shaders are handled by `@hyperfr
         data-start="T"
         data-duration="SCENE2"
         data-track-index="1"
+        data-width="1920"
+        data-height="1080"
       ></div>
     </div>
     <script>
diff --git a/skills/hyperframes-animation/transitions/css-push.md b/skills/hyperframes-animation/transitions/css-push.md
index b7f550351f..be258f7b1e 100644
--- a/skills/hyperframes-animation/transitions/css-push.md
+++ b/skills/hyperframes-animation/transitions/css-push.md
@@ -6,7 +6,7 @@ Both scenes move together — new pushes old out.
 
 ```js
 tl.to(old, { x: -1920, duration: 0.5, ease: "power3.inOut" }, T);
-tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 0, duration: 0.5, ease: "power3.inOut" }, T);
+tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 0, opacity: 1, duration: 0.5, ease: "power3.inOut" }, T);
 ```
 
 ### Vertical Push
@@ -15,7 +15,7 @@ Same as push slide but vertical.
 
 ```js
 tl.to(old, { y: -1080, duration: 0.5, ease: "power3.inOut" }, T);
-tl.fromTo(new, { y: 1080, opacity: 1 }, { y: 0, duration: 0.5, ease: "power3.inOut" }, T);
+tl.fromTo(new, { y: 1080, opacity: 1 }, { y: 0, opacity: 1, duration: 0.5, ease: "power3.inOut" }, T);
 ```
 
 ### Elastic Push
@@ -24,7 +24,7 @@ Push with overshoot bounce on the incoming scene.
 
 ```js
 tl.to(old, { x: -1920, duration: 0.5, ease: "power3.in" }, T);
-tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 30, duration: 0.4, ease: "power4.out" }, T + 0.1);
+tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 30, opacity: 1, duration: 0.4, ease: "power4.out" }, T + 0.1);
 tl.to(new, { x: -15, duration: 0.15, ease: "sine.inOut" }, T + 0.5);
 tl.to(new, { x: 0, duration: 0.1, ease: "sine.out" }, T + 0.65);
 ```
@@ -36,6 +36,6 @@ Old compresses, new expands from opposite side.
 ```js
 tl.to(old, { scaleX: 0, transformOrigin: "left center", duration: 0.4, ease: "power3.inOut" }, T);
 tl.fromTo(new, { scaleX: 0, transformOrigin: "right center", opacity: 1 },
-  { scaleX: 1, duration: 0.4, ease: "power3.inOut" }, T + 0.1);
+  { scaleX: 1, opacity: 1, duration: 0.4, ease: "power3.inOut" }, T + 0.1);
 tl.set(old, { opacity: 0 }, T + 0.5);
 ```
diff --git a/skills/hyperframes-animation/transitions/overview.md b/skills/hyperframes-animation/transitions/overview.md
index 5b95acfa03..596555afe4 100644
--- a/skills/hyperframes-animation/transitions/overview.md
+++ b/skills/hyperframes-animation/transitions/overview.md
@@ -19,7 +19,7 @@ A transition tells the viewer how two scenes relate. A crossfade says "this cont
 These are non-negotiable for every multi-scene composition:
 
 1. **Every composition uses transitions.** No exceptions. Scenes without transitions feel like jump cuts.
-2. **Every scene uses entrance animations.** Elements animate IN — opacity, position, scale, etc. No scene should pop fully-formed onto screen. Entrances live in the scene's own file and timeline; the root's timeline only moves the scene hosts (`catalog.md` → Scene Template). Use `gsap.fromTo()` (not `gsap.from()`) so the start state is explicit: `from()` animates _to_ current CSS, so pairing it with CSS `opacity: 0` is a 0→0 noop and the element never appears (see `/hyperframes-core` → sub-compositions).
+2. **Every scene uses entrance animations.** Elements animate IN — opacity, position, scale, etc. No scene should pop fully-formed onto screen. Entrances live in the scene's own file and timeline, never the root's (`/hyperframes-core` → scene ownership). Use `gsap.fromTo()` (not `gsap.from()`) so the start state is explicit: `from()` animates _to_ current CSS, so pairing it with CSS `opacity: 0` is a 0→0 noop and the element never appears (see `/hyperframes-core` → sub-compositions).
 3. **Exit animations are BANNED** except on the final scene. Do NOT use `gsap.to()` to animate elements out before a transition fires. The transition IS the exit. Outgoing scene content must be fully visible when the transition starts — the transition handles the visual handoff.
 4. **Final scene exception:** The last scene MAY fade elements out (e.g., fade to black at the end of the composition). This is the only scene where exit animations are allowed.