From ddca5158b609a4e3a58b35e082b27e104fc1cb04 Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Tue, 24 Mar 2026 22:14:57 -0700 Subject: [PATCH] fix: control element visibility via GSAP since runtime is not active Without the HyperFrames runtime, data-start/data-duration don't control element visibility. All elements now start with visibility:hidden and GSAP tl.set() shows/hides them at their exact AE timing. 229 GSAP lines: 84 show + 84 hide + 61 keyframe animations. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../scripts/generate-hyperframes.py | 12 +- examples/modern-fast-promo/index.html | 318 +++++++++++++----- 2 files changed, 249 insertions(+), 81 deletions(-) diff --git a/.claude/skills/decomposing-ae/scripts/generate-hyperframes.py b/.claude/skills/decomposing-ae/scripts/generate-hyperframes.py index b909e46022..960286098e 100644 --- a/.claude/skills/decomposing-ae/scripts/generate-hyperframes.py +++ b/.claude/skills/decomposing-ae/scripts/generate-hyperframes.py @@ -157,7 +157,7 @@ def layer_to_html(layer: dict, comp: dict, comp_idx: int, layer_idx: int) -> tup f"width:{w}px", f"height:{h}px", f"transform-origin:{transform_origin}", - f"opacity:{round(op, 4)}", + f"visibility:hidden", # framework mounts via data-start; GSAP shows via tween ] if abs(sx - 1) > 0.001 or abs(sy - 1) > 0.001: style_parts.append(f"transform:scale({round(sx, 4)},{round(sy, 4)})") @@ -251,6 +251,16 @@ def layer_to_html(layer: dict, comp: dict, comp_idx: int, layer_idx: int) -> tup f'style="{style}">{inner}' ) + # Mount/unmount via GSAP (framework not running — we control visibility) + if ltype != "null": + gsap_lines.append( + f' tl.set("{f"#{el_id}"}", {{ visibility: "visible", opacity: {round(op, 4)} }}, {round(in_pt, 4)});' + ) + if dur > 0: + gsap_lines.append( + f' tl.set("{f"#{el_id}"}", {{ visibility: "hidden" }}, {round(in_pt + dur, 4)});' + ) + # Generate GSAP tweens from keyframes for prop_name in ["scale", "opacity", "rotation", "position"]: prop_data = transform.get(prop_name, {}) diff --git a/examples/modern-fast-promo/index.html b/examples/modern-fast-promo/index.html index b3c5f77cfc..8315f288b8 100644 --- a/examples/modern-fast-promo/index.html +++ b/examples/modern-fast-promo/index.html @@ -21,100 +21,100 @@
-
+
-
-
-
-
THANKS FOR WATCHING
-
-
THANKS FOR WATCHING
-
-
Photo/Video_10
-
-
Photo/Video_09
-
trendy
-
trendy
-
-
Photo/Video_09
-
-
-
-
-
-
-
media files
-
-
change
-
-
-
Photo/Video_08
-
-
Photo/Video_08
-
-
Photo/Video_08
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
-
dynamic
-
-
dynamic
-
-
-
-
-
dynamic
-
Photo/Video_07
-
-
Photo/Video_06
-
-
Photo/Video_06
-
modern
-
creative
-
stylish
-
Effect_01
-
Photo/Video_06
-
Photo/Video_06
-
-
Photo/Video_05
-
Photo/Video_05
+ + + + + + + + + + + + + + + + + + + + + + +
-
Photo/Video_04
-
easy to use
-
easy to use
-
-
Photo/Video_04
-
Photo/Video_04
-
Photo/Video_04
-
Photo/Video_04
+ + + + + + + +
-
clean design
-
-
-
Photo/Video_02
-
-
-
-
-
-
-
Photo/Video_02
-
-
modern promo
-
-
Transition_01
-
Photo/Video_01
-
Photo/Video_01
-
+ + + + + + + + + + + + + + + + + +
@@ -122,28 +122,120 @@ window.__timelines = window.__timelines || {}; var tl = gsap.timeline({ paused: true }); + tl.set("#c999-l0", { visibility: "visible", opacity: 1 }, 0.0); + tl.set("#c999-l0", { visibility: "hidden" }, 22.7895); /* Scene_04 (15.4-16.3s) */ tl.set("#scene-0", { opacity: 1 }, 15.4488); + tl.set("#c1-l0", { visibility: "visible", opacity: 0.5 }, 18.9857); + tl.set("#c1-l0", { visibility: "hidden" }, 19.8699); + tl.set("#c1-l1", { visibility: "visible", opacity: 0.5 }, 18.9857); + tl.set("#c1-l1", { visibility: "hidden" }, 19.8699); + tl.set("#c1-l2", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l2", { visibility: "hidden" }, 16.333); + tl.set("#c1-l3", { visibility: "visible", opacity: 1 }, 19.8532); + tl.set("#c1-l3", { visibility: "hidden" }, 20.7374); tl.set("#c1-l3", { scale: 1.0 }, 15.4488); tl.to("#c1-l3", { scale: 0.76, duration: 2.636, ease: "power2.inOut" }, 15.4488); + tl.set("#c1-l4", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l4", { visibility: "hidden" }, 16.333); + tl.set("#c1-l5", { visibility: "visible", opacity: 1 }, 19.8532); + tl.set("#c1-l5", { visibility: "hidden" }, 20.7374); tl.set("#c1-l5", { scale: 1.0 }, 15.4488); tl.to("#c1-l5", { scale: 0.76, duration: 2.636, ease: "power2.inOut" }, 15.4488); + tl.set("#c1-l6", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l6", { visibility: "hidden" }, 16.333); tl.set("#c1-l6", { opacity: 0.0 }, 21.5549); tl.to("#c1-l6", { opacity: 1.0, duration: 0.3337, ease: "power2.inOut" }, 21.5549); + tl.set("#c1-l7", { visibility: "visible", opacity: 1 }, 20.3537); + tl.set("#c1-l7", { visibility: "hidden" }, 20.356); + tl.set("#c1-l8", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l8", { visibility: "hidden" }, 16.333); + tl.set("#c1-l9", { visibility: "visible", opacity: 1 }, 18.1849); + tl.set("#c1-l9", { visibility: "hidden" }, 19.5529); + tl.set("#c1-l10", { visibility: "visible", opacity: 1 }, 18.1849); + tl.set("#c1-l10", { visibility: "hidden" }, 18.8856); + tl.set("#c1-l11", { visibility: "visible", opacity: 1 }, 18.1849); + tl.set("#c1-l11", { visibility: "hidden" }, 18.5519); + tl.set("#c1-l12", { visibility: "visible", opacity: 1 }, 18.1849); + tl.set("#c1-l12", { visibility: "hidden" }, 18.8856); tl.set("#c1-l12", { opacity: 1.0 }, 15.4822); tl.to("#c1-l12", { opacity: 0.3, duration: 0.3003, ease: "none" }, 15.4822); + tl.set("#c1-l13", { visibility: "visible", opacity: 1 }, 18.1849); + tl.set("#c1-l13", { visibility: "hidden" }, 18.4612); tl.set("#c1-l13", { scale: 1.0 }, 15.7825); tl.to("#c1-l13", { scale: 1.2, duration: 1.8018, ease: "power2.inOut" }, 15.7825); + tl.set("#c1-l14", { visibility: "visible", opacity: 1 }, 16.7835); + tl.set("#c1-l14", { visibility: "hidden" }, 16.8836); + tl.set("#c1-l15", { visibility: "visible", opacity: 1 }, 16.7835); + tl.set("#c1-l15", { visibility: "hidden" }, 16.8836); + tl.set("#c1-l16", { visibility: "visible", opacity: 1 }, 16.283); + tl.set("#c1-l16", { visibility: "hidden" }, 17.3841); + tl.set("#c1-l17", { visibility: "visible", opacity: 1 }, 16.283); + tl.set("#c1-l17", { visibility: "hidden" }, 17.3841); + tl.set("#c1-l18", { visibility: "visible", opacity: 0.5 }, 16.3831); + tl.set("#c1-l18", { visibility: "hidden" }, 17.0838); + tl.set("#c1-l19", { visibility: "visible", opacity: 1 }, 16.1161); + tl.set("#c1-l19", { visibility: "hidden" }, 16.6833); + tl.set("#c1-l20", { visibility: "visible", opacity: 1 }, 16.283); + tl.set("#c1-l20", { visibility: "hidden" }, 16.5166); tl.set("#c1-l20", { scale: 1.0 }, 15.8492); tl.to("#c1-l20", { scale: 1.1, duration: 0.367, ease: "none" }, 15.8492); tl.to("#c1-l20", { scale: 0.9, duration: 0.4672, ease: "none" }, 16.2162); + tl.set("#c1-l21", { visibility: "visible", opacity: 1 }, 16.1161); + tl.set("#c1-l21", { visibility: "hidden" }, 16.6833); + tl.set("#c1-l22", { visibility: "visible", opacity: 1 }, 16.283); + tl.set("#c1-l22", { visibility: "hidden" }, 16.5166); tl.set("#c1-l22", { scale: 1.0 }, 15.7491); tl.to("#c1-l22", { scale: 1.2, duration: 0.1001, ease: "none" }, 15.7491); tl.to("#c1-l22", { scale: 0.9, duration: 0.367, ease: "none" }, 15.8492); + tl.set("#c1-l23", { visibility: "visible", opacity: 0.4 }, 17.3173); + tl.set("#c1-l23", { visibility: "hidden" }, 18.2182); + tl.set("#c1-l24", { visibility: "visible", opacity: 1 }, 16.1161); + tl.set("#c1-l24", { visibility: "hidden" }, 17.5509); + tl.set("#c1-l25", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l25", { visibility: "hidden" }, 18.2182); + tl.set("#c1-l26", { visibility: "visible", opacity: 1 }, 15.7825); + tl.set("#c1-l26", { visibility: "hidden" }, 16.4832); + tl.set("#c1-l27", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l27", { visibility: "hidden" }, 16.8168); + tl.set("#c1-l28", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l28", { visibility: "hidden" }, 16.4832); + tl.set("#c1-l29", { visibility: "visible", opacity: 1 }, 15.4488); + tl.set("#c1-l29", { visibility: "hidden" }, 16.5165); tl.to("#scene-0", { opacity: 0, duration: 0.3 }, 16.033); /* Scene_03 (8.6-12.8s) */ tl.set("#scene-1", { opacity: 1 }, 8.642); + tl.set("#c2-l0", { visibility: "visible", opacity: 1 }, 8.642); + tl.set("#c2-l0", { visibility: "hidden" }, 9.5387); + tl.set("#c2-l1", { visibility: "visible", opacity: 0.2 }, 14.014); + tl.set("#c2-l1", { visibility: "hidden" }, 15.649); + tl.set("#c2-l2", { visibility: "visible", opacity: 1 }, 8.642); + tl.set("#c2-l2", { visibility: "hidden" }, 9.5387); + tl.set("#c2-l3", { visibility: "visible", opacity: 0.2 }, 14.014); + tl.set("#c2-l3", { visibility: "hidden" }, 15.649); + tl.set("#c2-l4", { visibility: "visible", opacity: 0.5 }, 13.28); + tl.set("#c2-l4", { visibility: "hidden" }, 15.649); + tl.set("#c2-l5", { visibility: "visible", opacity: 0.35 }, 13.28); + tl.set("#c2-l5", { visibility: "hidden" }, 15.649); + tl.set("#c2-l6", { visibility: "visible", opacity: 0.6 }, 13.28); + tl.set("#c2-l6", { visibility: "hidden" }, 15.649); + tl.set("#c2-l7", { visibility: "visible", opacity: 0.7 }, 13.28); + tl.set("#c2-l7", { visibility: "hidden" }, 15.649); + tl.set("#c2-l8", { visibility: "visible", opacity: 1 }, 12.5459); + tl.set("#c2-l8", { visibility: "hidden" }, 14.014); + tl.set("#c2-l9", { visibility: "visible", opacity: 1 }, 13.28); + tl.set("#c2-l9", { visibility: "hidden" }, 15.8159); + tl.set("#c2-l10", { visibility: "visible", opacity: 1 }, 8.642); + tl.set("#c2-l10", { visibility: "hidden" }, 9.2217); + tl.set("#c2-l11", { visibility: "visible", opacity: 1 }, 11.2446); + tl.set("#c2-l11", { visibility: "hidden" }, 13.3133); + tl.set("#c2-l12", { visibility: "visible", opacity: 1 }, 8.642); + tl.set("#c2-l12", { visibility: "hidden" }, 9.2217); + tl.set("#c2-l13", { visibility: "visible", opacity: 1 }, 11.2446); + tl.set("#c2-l13", { visibility: "hidden" }, 13.3133); + tl.set("#c2-l14", { visibility: "visible", opacity: 1 }, 9.1425); + tl.set("#c2-l14", { visibility: "hidden" }, 10.9443); tl.set("#c2-l14", { scale: 1.0 }, 8.8088); tl.to("#c2-l14", { scale: 1.2, duration: 0.1669, ease: "none" }, 8.8088); tl.to("#c2-l14", { scale: 1.0, duration: 0.1668, ease: "none" }, 8.9757); @@ -153,12 +245,16 @@ tl.to("#c2-l14", { scale: 1.0, duration: 0.3336, ease: "none" }, 9.9767); tl.set("#c2-l14", { opacity: 1.0 }, 10.3103); tl.to("#c2-l14", { opacity: 0.0, duration: 0.3337, ease: "power2.inOut" }, 10.3103); + tl.set("#c2-l15", { visibility: "visible", opacity: 1 }, 9.3093); + tl.set("#c2-l15", { visibility: "hidden" }, 11.1111); tl.set("#c2-l15", { scale: 1.0 }, 9.3093); tl.to("#c2-l15", { scale: 1.05, duration: 0.3337, ease: "none" }, 9.3093); tl.to("#c2-l15", { scale: 0.95, duration: 0.3337, ease: "none" }, 9.643); tl.to("#c2-l15", { scale: 1.0, duration: 0.3336, ease: "none" }, 9.9767); tl.set("#c2-l15", { opacity: 1.0 }, 10.3103); tl.to("#c2-l15", { opacity: 0.0, duration: 0.3337, ease: "power2.inOut" }, 10.3103); + tl.set("#c2-l16", { visibility: "visible", opacity: 1 }, 8.9757); + tl.set("#c2-l16", { visibility: "hidden" }, 11.278); tl.set("#c2-l16", { scale: 1.0 }, 8.8088); tl.to("#c2-l16", { scale: 1.2, duration: 0.1669, ease: "none" }, 8.8088); tl.to("#c2-l16", { scale: 1.0, duration: 0.1668, ease: "none" }, 8.9757); @@ -168,6 +264,18 @@ tl.to("#c2-l16", { scale: 1.0, duration: 0.3336, ease: "none" }, 9.9767); tl.set("#c2-l16", { opacity: 1.0 }, 10.3103); tl.to("#c2-l16", { opacity: 0.0, duration: 0.3337, ease: "power2.inOut" }, 10.3103); + tl.set("#c2-l17", { visibility: "visible", opacity: 1 }, 11.1779); + tl.set("#c2-l17", { visibility: "hidden" }, 12.5459); + tl.set("#c2-l18", { visibility: "visible", opacity: 1 }, 11.2446); + tl.set("#c2-l18", { visibility: "hidden" }, 12.5459); + tl.set("#c2-l19", { visibility: "visible", opacity: 1 }, 11.2446); + tl.set("#c2-l19", { visibility: "hidden" }, 12.5459); + tl.set("#c2-l20", { visibility: "visible", opacity: 1 }, 8.8088); + tl.set("#c2-l20", { visibility: "hidden" }, 9.6763); + tl.set("#c2-l21", { visibility: "visible", opacity: 1 }, 8.642); + tl.set("#c2-l21", { visibility: "hidden" }, 9.8432); + tl.set("#c2-l22", { visibility: "visible", opacity: 1 }, 8.642); + tl.set("#c2-l22", { visibility: "hidden" }, 11.278); tl.set("#c2-l22", { scale: 1.5 }, 8.642); tl.to("#c2-l22", { scale: 1.0, duration: 0.6673, ease: "power2.inOut" }, 8.642); tl.set("#c2-l22", { opacity: 0.0 }, 8.642); @@ -176,18 +284,36 @@ /* Scene_02 (5.9-9.0s) */ tl.set("#scene-2", { opacity: 1 }, 5.8725); + tl.set("#c3-l0", { visibility: "visible", opacity: 1 }, 5.8725); + tl.set("#c3-l0", { visibility: "hidden" }, 9.009); tl.set("#c3-l0", { scale: 1.0 }, 8.3083); tl.to("#c3-l0", { scale: 1.2, duration: 0.6673, ease: "power2.inOut" }, 8.3083); + tl.set("#c3-l1", { visibility: "visible", opacity: 1 }, 6.8068); + tl.set("#c3-l1", { visibility: "hidden" }, 8.0747); tl.set("#c3-l1", { scale: 0.8 }, 5.8725); tl.to("#c3-l1", { scale: 1.0, duration: 0.6673, ease: "power2.inOut" }, 5.8725); tl.to("#c3-l1", { scale: 1.2, duration: 0.1335, ease: "none" }, 6.5398); tl.to("#c3-l1", { scale: 1.0, duration: 0.2669, ease: "none" }, 6.6733); tl.to("#c3-l1", { scale: 1.15, duration: 1.1011, ease: "power2.inOut" }, 6.9402); + tl.set("#c3-l2", { visibility: "visible", opacity: 0.2 }, 6.8068); + tl.set("#c3-l2", { visibility: "hidden" }, 8.0747); + tl.set("#c3-l3", { visibility: "visible", opacity: 1 }, 7.4074); + tl.set("#c3-l3", { visibility: "hidden" }, 8.8422); + tl.set("#c3-l4", { visibility: "visible", opacity: 1 }, 5.8725); + tl.set("#c3-l4", { visibility: "hidden" }, 8.8421); + tl.set("#c3-l5", { visibility: "visible", opacity: 1 }, 5.8725); + tl.set("#c3-l5", { visibility: "hidden" }, 9.009); tl.set("#c3-l5", { scale: 1.0 }, 8.3083); tl.to("#c3-l5", { scale: 1.2, duration: 0.6673, ease: "power2.inOut" }, 8.3083); + tl.set("#c3-l6", { visibility: "visible", opacity: 1 }, 5.8725); + tl.set("#c3-l6", { visibility: "hidden" }, 9.009); + tl.set("#c3-l7", { visibility: "visible", opacity: 1 }, 5.8725); + tl.set("#c3-l7", { visibility: "hidden" }, 9.009); tl.to("#scene-2", { opacity: 0, duration: 0.3 }, 8.709); /* Scene_01 (0.0-6.6s) */ + tl.set("#c4-l0", { visibility: "visible", opacity: 1 }, 3.5369); + tl.set("#c4-l0", { visibility: "hidden" }, 6.2396); tl.set("#c4-l0", { scale: 0.0 }, 0.0); tl.to("#c4-l0", { scale: 1.0, duration: 0.6673, ease: "power2.inOut" }, 0.0); tl.to("#c4-l0", { scale: 1.0, duration: 0.0334, ease: "power2.inOut" }, 0.6673); @@ -195,10 +321,42 @@ tl.to("#c4-l0", { scale: 0.8, duration: 0.2669, ease: "none" }, 0.8342); tl.to("#c4-l0", { scale: 0.8, duration: 0.0334, ease: "power2.inOut" }, 1.1011); tl.to("#c4-l0", { scale: 0.65, duration: 1.5348, ease: "power2.inOut" }, 1.1345); + tl.set("#c4-l1", { visibility: "visible", opacity: 1 }, 4.1041); + tl.set("#c4-l1", { visibility: "hidden" }, 6.2396); + tl.set("#c4-l2", { visibility: "visible", opacity: 1 }, 3.6703); + tl.set("#c4-l2", { visibility: "hidden" }, 4.1708); + tl.set("#c4-l3", { visibility: "visible", opacity: 1 }, 3.5369); + tl.set("#c4-l3", { visibility: "hidden" }, 4.1709); + tl.set("#c4-l5", { visibility: "visible", opacity: 1 }, 3.2032); + tl.set("#c4-l5", { visibility: "hidden" }, 4.2376); + tl.set("#c4-l6", { visibility: "visible", opacity: 0.7 }, 3.1365); + tl.set("#c4-l6", { visibility: "hidden" }, 4.1709); + tl.set("#c4-l7", { visibility: "visible", opacity: 0.5 }, 3.0697); + tl.set("#c4-l7", { visibility: "hidden" }, 4.1041); + tl.set("#c4-l8", { visibility: "visible", opacity: 0.3 }, 2.7027); + tl.set("#c4-l8", { visibility: "hidden" }, 3.7371); + tl.set("#c4-l9", { visibility: "visible", opacity: 1 }, 2.3357); + tl.set("#c4-l9", { visibility: "hidden" }, 3.3701); + tl.set("#c4-l10", { visibility: "visible", opacity: 1 }, 3.5369); + tl.set("#c4-l10", { visibility: "hidden" }, 4.0635); tl.set("#c4-l10", { scale: 1.0 }, 0.6673); tl.to("#c4-l10", { scale: 1.15, duration: 2.2022, ease: "power2.inOut" }, 0.6673); + tl.set("#c4-l11", { visibility: "visible", opacity: 1 }, 2.3357); + tl.set("#c4-l11", { visibility: "hidden" }, 3.0364); + tl.set("#c4-l12", { visibility: "visible", opacity: 1 }, 1.001); + tl.set("#c4-l12", { visibility: "hidden" }, 2.0354); tl.set("#c4-l12", { scale: 1.0 }, 0.6673); tl.to("#c4-l12", { scale: 0.8, duration: 1.001, ease: "power2.inOut" }, 0.6673); + tl.set("#c4-l13", { visibility: "visible", opacity: 0.4 }, 1.3347); + tl.set("#c4-l13", { visibility: "hidden" }, 6.4398); + tl.set("#c4-l14", { visibility: "visible", opacity: 1 }, 0.0); + tl.set("#c4-l14", { visibility: "hidden" }, 3.1031); + tl.set("#c4-l15", { visibility: "visible", opacity: 1 }, 0.0); + tl.set("#c4-l15", { visibility: "hidden" }, 3.1031); + tl.set("#c4-l16", { visibility: "visible", opacity: 1 }, 0.0); + tl.set("#c4-l16", { visibility: "hidden" }, 4.2376); + tl.set("#c4-l17", { visibility: "visible", opacity: 1 }, 0.0); + tl.set("#c4-l17", { visibility: "hidden" }, 7.7744); tl.to("#scene-3", { opacity: 0, duration: 0.3 }, 6.2732);