mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-05 05:37:09 +00:00
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) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
4d816709eb
commit
ddca5158b6
@@ -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}</div>'
|
||||
)
|
||||
|
||||
# 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, {})
|
||||
|
||||
@@ -21,100 +21,100 @@
|
||||
<body>
|
||||
<div id="root" data-composition-id="render"
|
||||
data-width="1920" data-height="1080" data-duration="26.69">
|
||||
<div id="c999-l0" data-start="0.0" data-duration="22.7895" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:#111111"></div>
|
||||
<div id="c999-l0" data-start="0.0" data-duration="22.7895" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:#111111"></div>
|
||||
<!-- ═══ Scene_04 (15.4-16.3s) ═══ -->
|
||||
<div id="scene-0" data-start="15.4488" data-duration="0.8842" data-track-index="1" style="position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden;opacity:0;">
|
||||
<div id="c1-l0" data-start="3.5369" data-duration="0.8842" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.5;transform:scale(-1.0,-1.0);border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c1-l1" data-start="3.5369" data-duration="0.8842" data-track-index="1" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.5;border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c1-l2" data-start="0.0" data-duration="0.8842" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c1-l3" data-start="4.4044" data-duration="0.8842" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:2062px;height:142px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">THANKS FOR WATCHING</span></div>
|
||||
<div id="c1-l4" data-start="0.0" data-duration="0.8842" data-track-index="4" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c1-l5" data-start="4.4044" data-duration="0.8842" data-track-index="5" style="position:absolute;left:0.0px;top:0.0px;width:2062px;height:142px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">THANKS FOR WATCHING</span></div>
|
||||
<div id="c1-l6" data-start="0.0" data-duration="0.8842" data-track-index="6" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:#111111"></div>
|
||||
<div id="c1-l7" data-start="4.9049" data-duration="0.0023" data-track-index="7" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_10</span></div>
|
||||
<div id="c1-l8" data-start="0.0" data-duration="0.8842" data-track-index="8" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(0.5,1.0);background:#111111"></div>
|
||||
<div id="c1-l9" data-start="2.7361" data-duration="1.368" data-track-index="9" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_09</span></div>
|
||||
<div id="c1-l10" data-start="2.7361" data-duration="0.7007" data-track-index="10" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:321px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">trendy</span></div>
|
||||
<div id="c1-l11" data-start="2.7361" data-duration="0.367" data-track-index="11" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:321px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">trendy</span></div>
|
||||
<div id="c1-l12" data-start="2.7361" data-duration="0.7007" data-track-index="12" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:#111111"></div>
|
||||
<div id="c1-l13" data-start="2.7361" data-duration="0.2763" data-track-index="13" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_09</span></div>
|
||||
<div id="c1-l14" data-start="1.3347" data-duration="0.1001" data-track-index="14" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(-1.0,-1.0);border:18px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c1-l15" data-start="1.3347" data-duration="0.1001" data-track-index="15" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;border:18px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c1-l16" data-start="0.8342" data-duration="1.1011" data-track-index="16" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(-1.0,-1.0);border:18px solid #ff00de;background:transparent"></div>
|
||||
<div id="c1-l17" data-start="0.8342" data-duration="1.1011" data-track-index="17" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;border:18px solid #ff00de;background:transparent"></div>
|
||||
<div id="c1-l18" data-start="0.9343" data-duration="0.7007" data-track-index="18" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.5;background:#111111"></div>
|
||||
<div id="c1-l19" data-start="0.6673" data-duration="0.5672" data-track-index="19" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;opacity:1;background:#111111"></div>
|
||||
<div id="c1-l20" data-start="0.8342" data-duration="0.2336" data-track-index="20" style="position:absolute;left:0.0px;top:0.0px;width:1195px;height:137px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">media files</span></div>
|
||||
<div id="c1-l21" data-start="0.6673" data-duration="0.5672" data-track-index="21" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;opacity:1;background:#111111"></div>
|
||||
<div id="c1-l22" data-start="0.8342" data-duration="0.2336" data-track-index="22" style="position:absolute;left:0.0px;top:0.0px;width:990px;height:163px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">change</span></div>
|
||||
<div id="c1-l23" data-start="1.8685" data-duration="0.9009" data-track-index="23" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.4;border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c1-l24" data-start="0.6673" data-duration="1.4348" data-track-index="24" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;opacity:1;background:#111111"></div>
|
||||
<div id="c1-l25" data-start="0.0" data-duration="2.7694" data-track-index="25" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_08</span></div>
|
||||
<div id="c1-l26" data-start="0.3337" data-duration="0.7007" data-track-index="26" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;opacity:1;background:#111111"></div>
|
||||
<div id="c1-l27" data-start="0.0" data-duration="1.368" data-track-index="27" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_08</span></div>
|
||||
<div id="c1-l28" data-start="0.0" data-duration="1.0344" data-track-index="28" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;opacity:1;background:#111111"></div>
|
||||
<div id="c1-l29" data-start="0.0" data-duration="1.0677" data-track-index="29" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_08</span></div>
|
||||
<div id="c1-l0" data-start="3.5369" data-duration="0.8842" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(-1.0,-1.0);border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c1-l1" data-start="3.5369" data-duration="0.8842" data-track-index="1" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c1-l2" data-start="0.0" data-duration="0.8842" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c1-l3" data-start="4.4044" data-duration="0.8842" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:2062px;height:142px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">THANKS FOR WATCHING</span></div>
|
||||
<div id="c1-l4" data-start="0.0" data-duration="0.8842" data-track-index="4" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c1-l5" data-start="4.4044" data-duration="0.8842" data-track-index="5" style="position:absolute;left:0.0px;top:0.0px;width:2062px;height:142px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">THANKS FOR WATCHING</span></div>
|
||||
<div id="c1-l6" data-start="0.0" data-duration="0.8842" data-track-index="6" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l7" data-start="4.9049" data-duration="0.0023" data-track-index="7" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_10</span></div>
|
||||
<div id="c1-l8" data-start="0.0" data-duration="0.8842" data-track-index="8" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(0.5,1.0);background:#111111"></div>
|
||||
<div id="c1-l9" data-start="2.7361" data-duration="1.368" data-track-index="9" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_09</span></div>
|
||||
<div id="c1-l10" data-start="2.7361" data-duration="0.7007" data-track-index="10" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:321px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">trendy</span></div>
|
||||
<div id="c1-l11" data-start="2.7361" data-duration="0.367" data-track-index="11" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:321px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">trendy</span></div>
|
||||
<div id="c1-l12" data-start="2.7361" data-duration="0.7007" data-track-index="12" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l13" data-start="2.7361" data-duration="0.2763" data-track-index="13" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_09</span></div>
|
||||
<div id="c1-l14" data-start="1.3347" data-duration="0.1001" data-track-index="14" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(-1.0,-1.0);border:18px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c1-l15" data-start="1.3347" data-duration="0.1001" data-track-index="15" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:18px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c1-l16" data-start="0.8342" data-duration="1.1011" data-track-index="16" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(-1.0,-1.0);border:18px solid #ff00de;background:transparent"></div>
|
||||
<div id="c1-l17" data-start="0.8342" data-duration="1.1011" data-track-index="17" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:18px solid #ff00de;background:transparent"></div>
|
||||
<div id="c1-l18" data-start="0.9343" data-duration="0.7007" data-track-index="18" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l19" data-start="0.6673" data-duration="0.5672" data-track-index="19" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l20" data-start="0.8342" data-duration="0.2336" data-track-index="20" style="position:absolute;left:0.0px;top:0.0px;width:1195px;height:137px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">media files</span></div>
|
||||
<div id="c1-l21" data-start="0.6673" data-duration="0.5672" data-track-index="21" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l22" data-start="0.8342" data-duration="0.2336" data-track-index="22" style="position:absolute;left:0.0px;top:0.0px;width:990px;height:163px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">change</span></div>
|
||||
<div id="c1-l23" data-start="1.8685" data-duration="0.9009" data-track-index="23" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c1-l24" data-start="0.6673" data-duration="1.4348" data-track-index="24" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l25" data-start="0.0" data-duration="2.7694" data-track-index="25" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_08</span></div>
|
||||
<div id="c1-l26" data-start="0.3337" data-duration="0.7007" data-track-index="26" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l27" data-start="0.0" data-duration="1.368" data-track-index="27" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_08</span></div>
|
||||
<div id="c1-l28" data-start="0.0" data-duration="1.0344" data-track-index="28" style="position:absolute;left:-0.34px;top:-0.51px;width:1920px;height:1080px;transform-origin:0.34px 0.51px;visibility:hidden;background:#111111"></div>
|
||||
<div id="c1-l29" data-start="0.0" data-duration="1.0677" data-track-index="29" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_08</span></div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Scene_03 (8.6-12.8s) ═══ -->
|
||||
<div id="scene-1" data-start="8.642" data-duration="4.1291" data-track-index="2" style="position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden;opacity:0;">
|
||||
<div id="c2-l0" data-start="0.0" data-duration="0.8967" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c2-l1" data-start="5.372" data-duration="1.635" data-track-index="1" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.2;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">dynamic</span></div>
|
||||
<div id="c2-l2" data-start="0.0" data-duration="0.8967" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c2-l3" data-start="5.372" data-duration="1.635" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.2;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">dynamic</span></div>
|
||||
<div id="c2-l4" data-start="4.638" data-duration="2.369" data-track-index="4" style="position:absolute;left:-984.0px;top:-340.0px;width:1920px;height:1080px;transform-origin:984.0px 340.0px;opacity:0.5;border:22px solid #ff00de;background:transparent"></div>
|
||||
<div id="c2-l5" data-start="4.638" data-duration="2.369" data-track-index="5" style="position:absolute;left:984.0px;top:340.0px;width:1920px;height:1080px;transform-origin:-984.0px -340.0px;opacity:0.35;border:51px solid #ff00de;background:transparent"></div>
|
||||
<div id="c2-l6" data-start="4.638" data-duration="2.369" data-track-index="6" style="position:absolute;left:-976.0px;top:-444.0px;width:1920px;height:1080px;transform-origin:976.0px 444.0px;opacity:0.6;border:51px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c2-l7" data-start="4.638" data-duration="2.369" data-track-index="7" style="position:absolute;left:988.0px;top:448.0px;width:1920px;height:1080px;transform-origin:-988.0px -448.0px;opacity:0.7;border:29px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c2-l8" data-start="3.9039" data-duration="1.4681" data-track-index="8" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:148px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">dynamic</span></div>
|
||||
<div id="c2-l9" data-start="4.638" data-duration="2.5359" data-track-index="9" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_07</span></div>
|
||||
<div id="c2-l10" data-start="0.0" data-duration="0.5797" data-track-index="10" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(0.5,1.0);background:#111111"></div>
|
||||
<div id="c2-l11" data-start="2.6026" data-duration="2.0687" data-track-index="11" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l12" data-start="0.0" data-duration="0.5797" data-track-index="12" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(0.5,1.0);background:#111111"></div>
|
||||
<div id="c2-l13" data-start="2.6026" data-duration="2.0687" data-track-index="13" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l14" data-start="0.5005" data-duration="1.8018" data-track-index="14" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:114px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">modern</span></div>
|
||||
<div id="c2-l15" data-start="0.6673" data-duration="1.8018" data-track-index="15" style="position:absolute;left:0.0px;top:0.0px;width:810px;height:114px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">creative</span></div>
|
||||
<div id="c2-l16" data-start="0.3337" data-duration="2.3023" data-track-index="16" style="position:absolute;left:0.0px;top:0.0px;width:662px;height:114px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">stylish</span></div>
|
||||
<div id="c2-l17" data-start="2.5359" data-duration="1.368" data-track-index="17" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Effect_01</span></div>
|
||||
<div id="c2-l18" data-start="2.6026" data-duration="1.3013" data-track-index="18" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.15,1.15);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l19" data-start="2.6026" data-duration="1.3013" data-track-index="19" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l20" data-start="0.1668" data-duration="0.8675" data-track-index="20" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c2-l21" data-start="0.0" data-duration="1.2012" data-track-index="21" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_05</span></div>
|
||||
<div id="c2-l22" data-start="0.0" data-duration="2.636" data-track-index="22" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_05</span></div>
|
||||
<div id="c2-l0" data-start="0.0" data-duration="0.8967" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c2-l1" data-start="5.372" data-duration="1.635" data-track-index="1" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">dynamic</span></div>
|
||||
<div id="c2-l2" data-start="0.0" data-duration="0.8967" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c2-l3" data-start="5.372" data-duration="1.635" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:27px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">dynamic</span></div>
|
||||
<div id="c2-l4" data-start="4.638" data-duration="2.369" data-track-index="4" style="position:absolute;left:-984.0px;top:-340.0px;width:1920px;height:1080px;transform-origin:984.0px 340.0px;visibility:hidden;border:22px solid #ff00de;background:transparent"></div>
|
||||
<div id="c2-l5" data-start="4.638" data-duration="2.369" data-track-index="5" style="position:absolute;left:984.0px;top:340.0px;width:1920px;height:1080px;transform-origin:-984.0px -340.0px;visibility:hidden;border:51px solid #ff00de;background:transparent"></div>
|
||||
<div id="c2-l6" data-start="4.638" data-duration="2.369" data-track-index="6" style="position:absolute;left:-976.0px;top:-444.0px;width:1920px;height:1080px;transform-origin:976.0px 444.0px;visibility:hidden;border:51px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c2-l7" data-start="4.638" data-duration="2.369" data-track-index="7" style="position:absolute;left:988.0px;top:448.0px;width:1920px;height:1080px;transform-origin:-988.0px -448.0px;visibility:hidden;border:29px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c2-l8" data-start="3.9039" data-duration="1.4681" data-track-index="8" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:148px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">dynamic</span></div>
|
||||
<div id="c2-l9" data-start="4.638" data-duration="2.5359" data-track-index="9" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_07</span></div>
|
||||
<div id="c2-l10" data-start="0.0" data-duration="0.5797" data-track-index="10" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(0.5,1.0);background:#111111"></div>
|
||||
<div id="c2-l11" data-start="2.6026" data-duration="2.0687" data-track-index="11" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l12" data-start="0.0" data-duration="0.5797" data-track-index="12" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(0.5,1.0);background:#111111"></div>
|
||||
<div id="c2-l13" data-start="2.6026" data-duration="2.0687" data-track-index="13" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l14" data-start="0.5005" data-duration="1.8018" data-track-index="14" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:114px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">modern</span></div>
|
||||
<div id="c2-l15" data-start="0.6673" data-duration="1.8018" data-track-index="15" style="position:absolute;left:0.0px;top:0.0px;width:810px;height:114px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">creative</span></div>
|
||||
<div id="c2-l16" data-start="0.3337" data-duration="2.3023" data-track-index="16" style="position:absolute;left:0.0px;top:0.0px;width:662px;height:114px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">stylish</span></div>
|
||||
<div id="c2-l17" data-start="2.5359" data-duration="1.368" data-track-index="17" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Effect_01</span></div>
|
||||
<div id="c2-l18" data-start="2.6026" data-duration="1.3013" data-track-index="18" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.15,1.15);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l19" data-start="2.6026" data-duration="1.3013" data-track-index="19" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_06</span></div>
|
||||
<div id="c2-l20" data-start="0.1668" data-duration="0.8675" data-track-index="20" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.0,0.5);background:#111111"></div>
|
||||
<div id="c2-l21" data-start="0.0" data-duration="1.2012" data-track-index="21" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_05</span></div>
|
||||
<div id="c2-l22" data-start="0.0" data-duration="2.636" data-track-index="22" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_05</span></div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Scene_02 (5.9-9.0s) ═══ -->
|
||||
<div id="scene-2" data-start="5.8725" data-duration="3.1365" data-track-index="3" style="position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden;opacity:0;">
|
||||
<div id="c3-l0" data-start="0.0" data-duration="3.1365" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l1" data-start="0.9343" data-duration="1.2679" data-track-index="1" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:114px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">easy to use</span></div>
|
||||
<div id="c3-l2" data-start="0.9343" data-duration="1.2679" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:114px;transform-origin:0px 0px;opacity:0.2;transform:scale(4.0,4.0);display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">easy to use</span></div>
|
||||
<div id="c3-l3" data-start="1.5349" data-duration="1.4348" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;border:2px solid #ff00dd;background:transparent"></div>
|
||||
<div id="c3-l4" data-start="0.0" data-duration="2.9696" data-track-index="4" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l5" data-start="0.0" data-duration="3.1365" data-track-index="5" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l6" data-start="0.0" data-duration="3.1365" data-track-index="6" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l7" data-start="0.0" data-duration="3.1365" data-track-index="7" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l0" data-start="0.0" data-duration="3.1365" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l1" data-start="0.9343" data-duration="1.2679" data-track-index="1" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:114px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">easy to use</span></div>
|
||||
<div id="c3-l2" data-start="0.9343" data-duration="1.2679" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:114px;transform-origin:0px 0px;visibility:hidden;transform:scale(4.0,4.0);display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">easy to use</span></div>
|
||||
<div id="c3-l3" data-start="1.5349" data-duration="1.4348" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:2px solid #ff00dd;background:transparent"></div>
|
||||
<div id="c3-l4" data-start="0.0" data-duration="2.9696" data-track-index="4" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l5" data-start="0.0" data-duration="3.1365" data-track-index="5" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l6" data-start="0.0" data-duration="3.1365" data-track-index="6" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
<div id="c3-l7" data-start="0.0" data-duration="3.1365" data-track-index="7" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_04</span></div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Scene_01 (0.0-6.6s) ═══ -->
|
||||
<div id="scene-3" data-start="0.0" data-duration="6.5732" data-track-index="4" style="position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden;opacity:1;">
|
||||
<div id="c4-l0" data-start="3.5369" data-duration="2.7027" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1338px;height:133px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">clean design</span></div>
|
||||
<div id="c4-l1" data-start="4.1041" data-duration="2.1355" data-track-index="1" style="position:absolute;left:-0.5px;top:0.0px;width:1920px;height:1080px;transform-origin:0.5px 0.0px;opacity:1;border:5px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l2" data-start="3.6703" data-duration="0.5005" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:#ff3333"></div>
|
||||
<div id="c4-l3" data-start="3.5369" data-duration="0.634" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_02</span></div>
|
||||
<div id="c4-l4" data-start="4.2042" data-duration="2.369" data-track-index="4" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;pointer-events:none"></div>
|
||||
<div id="c4-l5" data-start="3.2032" data-duration="1.0344" data-track-index="5" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;border:20px solid #ff00de;background:transparent"></div>
|
||||
<div id="c4-l6" data-start="3.1365" data-duration="1.0344" data-track-index="6" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.7;border:50px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l7" data-start="3.0697" data-duration="1.0344" data-track-index="7" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.5;border:50px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l8" data-start="2.7027" data-duration="1.0344" data-track-index="8" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.3;border:110px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l9" data-start="2.3357" data-duration="1.0344" data-track-index="9" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;border:170px solid #ff00de;background:transparent"></div>
|
||||
<div id="c4-l10" data-start="3.5369" data-duration="0.5266" data-track-index="10" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_02</span></div>
|
||||
<div id="c4-l11" data-start="2.3357" data-duration="0.7007" data-track-index="11" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;border:170px solid #ff00de;background:transparent"></div>
|
||||
<div id="c4-l12" data-start="1.001" data-duration="1.0344" data-track-index="12" style="position:absolute;left:0.0px;top:0.0px;width:1574px;height:128px;transform-origin:0px 0px;opacity:1;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">modern promo</span></div>
|
||||
<div id="c4-l13" data-start="1.3347" data-duration="5.1051" data-track-index="13" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:0.4;border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c4-l14" data-start="0.0" data-duration="3.1031" data-track-index="14" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Transition_01</span></div>
|
||||
<div id="c4-l15" data-start="0.0" data-duration="3.1031" data-track-index="15" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_01</span></div>
|
||||
<div id="c4-l16" data-start="0.0" data-duration="4.2376" data-track-index="16" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_01</span></div>
|
||||
<div id="c4-l17" data-start="0.0" data-duration="7.7744" data-track-index="17" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;opacity:1;background:#111111"></div>
|
||||
<div id="c4-l0" data-start="3.5369" data-duration="2.7027" data-track-index="0" style="position:absolute;left:0.0px;top:0.0px;width:1338px;height:133px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">clean design</span></div>
|
||||
<div id="c4-l1" data-start="4.1041" data-duration="2.1355" data-track-index="1" style="position:absolute;left:-0.5px;top:0.0px;width:1920px;height:1080px;transform-origin:0.5px 0.0px;visibility:hidden;border:5px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l2" data-start="3.6703" data-duration="0.5005" data-track-index="2" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:#ff3333"></div>
|
||||
<div id="c4-l3" data-start="3.5369" data-duration="0.634" data-track-index="3" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;transform:scale(1.1,1.1);background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_02</span></div>
|
||||
<div id="c4-l4" data-start="4.2042" data-duration="2.369" data-track-index="4" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;pointer-events:none"></div>
|
||||
<div id="c4-l5" data-start="3.2032" data-duration="1.0344" data-track-index="5" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:20px solid #ff00de;background:transparent"></div>
|
||||
<div id="c4-l6" data-start="3.1365" data-duration="1.0344" data-track-index="6" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:50px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l7" data-start="3.0697" data-duration="1.0344" data-track-index="7" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:50px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l8" data-start="2.7027" data-duration="1.0344" data-track-index="8" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:110px solid #ffcb00;background:transparent"></div>
|
||||
<div id="c4-l9" data-start="2.3357" data-duration="1.0344" data-track-index="9" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:170px solid #ff00de;background:transparent"></div>
|
||||
<div id="c4-l10" data-start="3.5369" data-duration="0.5266" data-track-index="10" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_02</span></div>
|
||||
<div id="c4-l11" data-start="2.3357" data-duration="0.7007" data-track-index="11" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:170px solid #ff00de;background:transparent"></div>
|
||||
<div id="c4-l12" data-start="1.001" data-duration="1.0344" data-track-index="12" style="position:absolute;left:0.0px;top:0.0px;width:1574px;height:128px;transform-origin:0px 0px;visibility:hidden;display:flex;align-items:center;justify-content:center"><span style="font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:#ffffff;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">modern promo</span></div>
|
||||
<div id="c4-l13" data-start="1.3347" data-duration="5.1051" data-track-index="13" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;border:2px solid #ffffff;background:transparent"></div>
|
||||
<div id="c4-l14" data-start="0.0" data-duration="3.1031" data-track-index="14" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Transition_01</span></div>
|
||||
<div id="c4-l15" data-start="0.0" data-duration="3.1031" data-track-index="15" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_01</span></div>
|
||||
<div id="c4-l16" data-start="0.0" data-duration="4.2376" data-track-index="16" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:rgba(30,30,30,0.8)"><span style="font-family:monospace;font-size:14px;color:#555;position:absolute;bottom:8px;right:8px;">Photo/Video_01</span></div>
|
||||
<div id="c4-l17" data-start="0.0" data-duration="7.7744" data-track-index="17" style="position:absolute;left:0.0px;top:0.0px;width:1920px;height:1080px;transform-origin:0px 0px;visibility:hidden;background:#111111"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -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);
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user