mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
Miguel Ángel
9734578e60
Restores the 208 catalog items reverted after their previews 404'd in production, this time on the payload mechanism rather than the .html files that caused the outage. The generator no longer writes a preview document to docs/public. That writer, and the machinery under it, existed only to produce files the docs host discards, so it is gone rather than bypassed. Items now embed the composition itself via a payload, which is what the previous change already does for the items that were already in the catalog. The variables explorer is parked, not restored: it drove its preview through the same unpublished .html path, so it would have shown an empty frame. Items that declare variables get the live player plus the static variables table, and reconnecting the explorer to payloads is a follow-up.
565 lines
22 KiB
HTML
Vendored
565 lines
22 KiB
HTML
Vendored
<!doctype html>
|
|
<!--
|
|
ui-focus-zoom -- HyperFrames video primitive (product demo / camera)
|
|
|
|
A full app surface establishes with one settle, then the camera zooms and
|
|
pans to an anchored region on its cue and holds the zoomed state. An
|
|
optional focus halo blooms softly at the anchor as the camera arrives.
|
|
|
|
Camera-servo law: the camera lives on ONE world wrapper transform,
|
|
translate(x, y) scale(S). A world point offset o from center lands at
|
|
S * o + T, so T = -offset * S. Offsets are percentages of the world's own
|
|
box (the world fills the viewport), so no pixel measurement is needed and
|
|
the primitive stays fully elastic. Micro-drift is built from integer sine
|
|
cycles (2 and 3 full cycles) that end at exactly zero before the authored
|
|
stillness, so the hold is dead still and every seek is reproducible.
|
|
|
|
The pan is clamped so the scaled world always covers the viewport:
|
|
|T| <= 50 * (S - 1) minus the drift amplitude. Extreme anchors near an
|
|
edge center as close as the clamp allows without revealing background.
|
|
|
|
The surface is a SLOT. Callers supply content by placing an inert template
|
|
anywhere in the HOST page (templates never render, and the runtime wipes
|
|
the host clip's own children on mount, so the slot lives at document
|
|
level):
|
|
|
|
<template data-slot="ui-focus-zoom-screen"> ... </template>
|
|
|
|
Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
|
|
img/video children are stretched to cover the surface. When no slot
|
|
exists, the primitive renders a token-styled skeleton app (header bar,
|
|
sidebar, content cards; hairline borders, surface mixes, one accent
|
|
element, no branding).
|
|
|
|
Variables (declared in data-composition-variables below):
|
|
- anchor_x (number percent, default 64): focus anchor from the left edge.
|
|
- anchor_y (number percent, default 36): focus anchor from the top edge.
|
|
- zoom (number, default 1.6): camera scale at the focused state (1 to 3).
|
|
- zoom_at (number seconds, default 1.4): camera departure cue from mount
|
|
start; clamped inside [IN, D - OUT - move] so the move never fights
|
|
the entrance or the exit.
|
|
- halo ("show" | "hide", default "show"): soft accent bloom at the anchor.
|
|
- accent ("green" | "blue" | "violet", default "green"): green rides
|
|
--brand, blue rides --accent, violet rides --accent-2.
|
|
- exit ("none" | "fade" | "up", default "none"): frame roots own
|
|
transitions; the default holds the final frame to the last pixel.
|
|
|
|
Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
|
|
IN_BASE = 0.90s one settle: rise + soft scale + fade
|
|
ZOOM_BASE = 1.10s the camera move, power2.inOut servo ease
|
|
HOLD = elastic; micro-drift ends at zero, then authored stillness
|
|
OUT_BASE = 0.50s only when exit != none
|
|
If D < IN_BASE + ZOOM_BASE + OUT_BASE, the phases compress together.
|
|
|
|
Mount contract: the runtime clones only this template. #root fills the
|
|
host box (no data-width/data-height, container-type: size, cqmin units),
|
|
is styled via #root only, and registers one paused timeline under the
|
|
LITERAL "ui-focus-zoom" key. Camera and drift tween plain objects and
|
|
repaint through one applyCamera writer, so any seek order lands the same
|
|
transform.
|
|
-->
|
|
<html
|
|
lang="en"
|
|
data-composition-id="ui-focus-zoom"
|
|
data-composition-duration="4.5"
|
|
data-composition-variables='[
|
|
{ "id": "anchor_x", "type": "number", "role": "content", "label": "Anchor X", "description": "Focus anchor, percent from the left edge of the surface.", "default": 64, "min": 0, "max": 100, "step": 1, "unit": "%" },
|
|
{ "id": "anchor_y", "type": "number", "role": "content", "label": "Anchor Y", "description": "Focus anchor, percent from the top edge of the surface.", "default": 36, "min": 0, "max": 100, "step": 1, "unit": "%" },
|
|
{ "id": "zoom", "type": "number", "role": "content", "label": "Zoom", "description": "Camera scale at the focused state.", "default": 1.6, "min": 1, "max": 3, "step": 0.05 },
|
|
{ "id": "zoom_at", "type": "number", "role": "timing", "label": "Zoom at", "description": "Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.", "default": 1.4, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
|
|
{ "id": "halo", "type": "enum", "role": "style", "label": "Halo", "description": "Soft accent bloom at the anchor as the camera arrives.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
|
|
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the halo and skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
|
|
{ "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
|
|
]'
|
|
>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>UI Focus Zoom</title>
|
|
</head>
|
|
<body>
|
|
<template>
|
|
<div id="root" data-composition-id="ui-focus-zoom" data-duration="4.5" data-fps="30">
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#root {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
container-type: size;
|
|
isolation: isolate;
|
|
color: var(--fg, #f8fafc);
|
|
font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ufz-clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
background: var(--bg, transparent);
|
|
}
|
|
|
|
.ufz-stage {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
/* the fixed frame: the camera moves the world inside this window */
|
|
.ufz-frame {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
|
|
border-radius: calc(var(--radius, 2cqmin) * 1.2);
|
|
background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ufz-accent));
|
|
box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
|
|
}
|
|
|
|
/* ONE world wrapper: all camera motion is this element's transform */
|
|
.ufz-world {
|
|
position: absolute;
|
|
inset: 0;
|
|
will-change: transform;
|
|
}
|
|
|
|
.ufz-surface {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
|
|
}
|
|
|
|
.ufz-surface > img,
|
|
.ufz-surface > video {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.ufz-halo {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 30cqmin;
|
|
height: 30cqmin;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--ufz-accent) 26%, transparent) 0%,
|
|
color-mix(in srgb, var(--ufz-accent) 12%, transparent) 42%,
|
|
transparent 70%
|
|
);
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
/* default skeleton surface: pure token furniture, no branding */
|
|
.ufz-skel {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.ufz-skel-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1, 1.6cqmin);
|
|
padding: 1.8cqmin 2.6cqmin;
|
|
border-bottom: 0.14cqmin solid
|
|
color-mix(in srgb, var(--border, #475569) 55%, transparent);
|
|
}
|
|
|
|
.ufz-skel-mark {
|
|
width: 2.6cqmin;
|
|
height: 2.6cqmin;
|
|
border-radius: 0.8cqmin;
|
|
background: color-mix(in srgb, var(--ufz-accent) 74%, var(--surface, #0b1016));
|
|
}
|
|
|
|
.ufz-skel-line {
|
|
height: 1.25cqmin;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
|
|
}
|
|
|
|
.ufz-skel-top .ufz-skel-line:nth-of-type(1) {
|
|
width: 9cqmin;
|
|
}
|
|
|
|
.ufz-skel-top .ufz-skel-line:nth-of-type(2) {
|
|
width: 6.5cqmin;
|
|
}
|
|
|
|
.ufz-skel-spring {
|
|
flex: 1;
|
|
}
|
|
|
|
.ufz-skel-chip {
|
|
width: 8.5cqmin;
|
|
height: 2.9cqmin;
|
|
border: 0.14cqmin solid color-mix(in srgb, var(--ufz-accent) 55%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--ufz-accent) 28%, transparent);
|
|
}
|
|
|
|
.ufz-skel-avatar {
|
|
width: 2.8cqmin;
|
|
height: 2.8cqmin;
|
|
border-radius: 50%;
|
|
background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
|
|
}
|
|
|
|
.ufz-skel-body {
|
|
display: grid;
|
|
grid-template-columns: 22% minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.ufz-skel-side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2cqmin;
|
|
padding: 2.6cqmin;
|
|
border-right: 0.14cqmin solid
|
|
color-mix(in srgb, var(--border, #475569) 55%, transparent);
|
|
}
|
|
|
|
.ufz-skel-side .ufz-skel-line:nth-child(1) {
|
|
width: 78%;
|
|
background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
|
|
}
|
|
|
|
.ufz-skel-side .ufz-skel-line:nth-child(2) {
|
|
width: 56%;
|
|
}
|
|
|
|
.ufz-skel-side .ufz-skel-line:nth-child(3) {
|
|
width: 66%;
|
|
}
|
|
|
|
.ufz-skel-side .ufz-skel-line:nth-child(4) {
|
|
width: 44%;
|
|
}
|
|
|
|
.ufz-skel-side .ufz-skel-line:nth-child(5) {
|
|
width: 60%;
|
|
}
|
|
|
|
.ufz-skel-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2, 1.8cqmin);
|
|
min-height: 0;
|
|
padding: var(--space-3, 2.8cqmin);
|
|
}
|
|
|
|
.ufz-skel-heading {
|
|
width: 34%;
|
|
height: 2.5cqmin;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
|
|
}
|
|
|
|
.ufz-skel-sub {
|
|
width: 52%;
|
|
height: 1.25cqmin;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
|
|
}
|
|
|
|
.ufz-skel-cards {
|
|
display: grid;
|
|
flex: 1;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 2.1cqmin;
|
|
min-height: 0;
|
|
margin-top: 0.8cqmin;
|
|
}
|
|
|
|
.ufz-skel-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5cqmin;
|
|
min-height: 0;
|
|
padding: 2.1cqmin;
|
|
border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
|
|
border-radius: var(--radius, 1.6cqmin);
|
|
background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
|
|
}
|
|
|
|
.ufz-skel-card .ufz-skel-line {
|
|
width: 55%;
|
|
}
|
|
|
|
.ufz-skel-block {
|
|
flex: 1;
|
|
min-height: 3cqmin;
|
|
border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
|
|
background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
|
|
}
|
|
|
|
.ufz-skel-card:nth-child(2) .ufz-skel-block {
|
|
background: color-mix(in srgb, var(--ufz-accent) 17%, transparent);
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
id="ui-focus-zoom-clip"
|
|
class="ufz-clip clip"
|
|
data-start="0"
|
|
data-duration="4.5"
|
|
data-track-index="0"
|
|
>
|
|
<div class="ufz-stage">
|
|
<div class="ufz-frame" role="img" aria-label="App surface with a camera focus zoom">
|
|
<div class="ufz-world">
|
|
<div class="ufz-surface">
|
|
<div class="ufz-skel" aria-hidden="true">
|
|
<div class="ufz-skel-top">
|
|
<span class="ufz-skel-mark"></span>
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-spring"></span>
|
|
<span class="ufz-skel-chip"></span>
|
|
<span class="ufz-skel-avatar"></span>
|
|
</div>
|
|
<div class="ufz-skel-body">
|
|
<div class="ufz-skel-side">
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-line"></span>
|
|
</div>
|
|
<div class="ufz-skel-main">
|
|
<span class="ufz-skel-heading"></span>
|
|
<span class="ufz-skel-sub"></span>
|
|
<div class="ufz-skel-cards">
|
|
<div class="ufz-skel-card">
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-block"></span>
|
|
</div>
|
|
<div class="ufz-skel-card">
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-block"></span>
|
|
</div>
|
|
<div class="ufz-skel-card">
|
|
<span class="ufz-skel-line"></span>
|
|
<span class="ufz-skel-block"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ufz-halo" aria-hidden="true"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
var root = document.getElementById("root");
|
|
var stage = root.querySelector(".ufz-stage");
|
|
var world = root.querySelector(".ufz-world");
|
|
var surface = root.querySelector(".ufz-surface");
|
|
var halo = root.querySelector(".ufz-halo");
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
function num(value, fallback, min, max) {
|
|
var parsed = parseFloat(value);
|
|
if (!isFinite(parsed)) parsed = fallback;
|
|
return Math.min(max, Math.max(min, parsed));
|
|
}
|
|
|
|
var anchorX = num(vars.anchor_x, 64, 0, 100);
|
|
var anchorY = num(vars.anchor_y, 36, 0, 100);
|
|
var zoom = num(vars.zoom, 1.6, 1, 3);
|
|
var zoomAt = num(vars.zoom_at, 1.4, 0, 30);
|
|
var haloOn = vars.halo !== "hide";
|
|
// Each enum choice routes to a DIFFERENT contract token so the
|
|
// variable stays meaningful under a theme.
|
|
var accentColors = {
|
|
green: "var(--brand, #71f5a7)",
|
|
blue: "var(--accent, #61a8ff)",
|
|
violet: "var(--accent-2, #c5a3ff)",
|
|
};
|
|
var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
|
|
? vars.accent
|
|
: "green";
|
|
var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
|
|
|
|
root.style.setProperty("--ufz-accent", accentColors[accent]);
|
|
|
|
// SLOT. Caller templates live at HOST DOCUMENT level (the mount
|
|
// wipes host-clip children, and templates never render). The
|
|
// scoped `document` proxy filters queries to this composition's
|
|
// subtree, so the lookup deliberately goes through ownerDocument.
|
|
var hostDoc = root.ownerDocument;
|
|
var slotTemplate = null;
|
|
try {
|
|
slotTemplate = hostDoc.querySelector('template[data-slot="ui-focus-zoom-screen"]');
|
|
} catch (error) {
|
|
slotTemplate = null;
|
|
}
|
|
if (slotTemplate) {
|
|
surface.querySelector(".ufz-skel").remove();
|
|
surface.appendChild(hostDoc.importNode(slotTemplate.content, true));
|
|
}
|
|
|
|
/* ===== Camera (camera-servo law): translate(x, y) scale(S) on the
|
|
ONE world wrapper. Translate percentages resolve against the
|
|
world's own box, which fills the viewport, so a world point at
|
|
offset o percent from center lands at S * o + T and the target
|
|
transform is T = -(anchor - 50) * S, no measurement needed.
|
|
The pan is clamped so the scaled world always covers the
|
|
viewport (|T| <= 50 * (S - 1) minus the drift amplitude). ===== */
|
|
var DRIFT_X = 0.16;
|
|
var DRIFT_Y = 0.11;
|
|
var panMax = Math.max(0, 50 * (zoom - 1) - Math.max(DRIFT_X, DRIFT_Y) - 0.2);
|
|
var targetX = Math.min(panMax, Math.max(-panMax, -(anchorX - 50) * zoom));
|
|
var targetY = Math.min(panMax, Math.max(-panMax, -(anchorY - 50) * zoom));
|
|
|
|
var cam = { s: 1, x: 0, y: 0 };
|
|
var drift = { p: 0, dx: 0, dy: 0 };
|
|
function applyCamera() {
|
|
world.style.transform =
|
|
"translate(" +
|
|
(cam.x + drift.dx) +
|
|
"%, " +
|
|
(cam.y + drift.dy) +
|
|
"%) scale(" +
|
|
cam.s +
|
|
")";
|
|
}
|
|
applyCamera();
|
|
|
|
// Halo pinned to the anchor in world space; it rides the camera.
|
|
// Explicit both-endpoint state BEFORE the timeline exists: the
|
|
// bloom fromTo sits mid-timeline, so without this set a seek that
|
|
// lands before the cue would show the halo unstyled.
|
|
halo.style.left = anchorX + "%";
|
|
halo.style.top = anchorY + "%";
|
|
if (!haloOn) halo.remove();
|
|
else
|
|
gsap.set(halo, {
|
|
opacity: 0,
|
|
scale: 0.55,
|
|
xPercent: -50,
|
|
yPercent: -50,
|
|
transformOrigin: "50% 50%",
|
|
});
|
|
|
|
// Envelope: fixed IN/ZOOM/OUT, elastic HOLD, never time-scaled.
|
|
var IN_BASE = 0.9;
|
|
var ZOOM_BASE = 1.1;
|
|
var OUT_BASE = exitMode === "none" ? 0 : 0.5;
|
|
var STILLNESS = 0.35;
|
|
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
|
|
var totalBase = IN_BASE + ZOOM_BASE + OUT_BASE;
|
|
var scale = duration < totalBase ? duration / totalBase : 1;
|
|
var IN = IN_BASE * scale;
|
|
var ZOOM = ZOOM_BASE * scale;
|
|
var OUT = OUT_BASE * scale;
|
|
var OUT_START = duration - OUT;
|
|
|
|
// The camera departs on its cue, clamped so the move never fights
|
|
// the entrance or the exit.
|
|
var zoomStart = Math.min(Math.max(zoomAt, IN), Math.max(IN, OUT_START - ZOOM - 0.05));
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
// IN: one settle. Rise + soft scale + fade, smooth ease-out.
|
|
tl.fromTo(
|
|
stage,
|
|
{ opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" },
|
|
{ opacity: 1, y: "0cqh", scale: 1, duration: IN, ease: "power3.out" },
|
|
0,
|
|
);
|
|
|
|
// Camera servo: one move to the anchored region, then hold zoomed.
|
|
tl.to(
|
|
cam,
|
|
{
|
|
s: zoom,
|
|
x: targetX,
|
|
y: targetY,
|
|
duration: ZOOM,
|
|
ease: "power2.inOut",
|
|
onUpdate: applyCamera,
|
|
},
|
|
zoomStart,
|
|
);
|
|
|
|
// Micro-drift: 2 and 3 INTEGER sine cycles that end at exactly
|
|
// zero before the authored stillness, so the final hold is dead
|
|
// still and every seek reproduces the same frame.
|
|
var driftDuration = Math.max(0, OUT_START - STILLNESS);
|
|
if (driftDuration >= 1.2) {
|
|
tl.to(
|
|
drift,
|
|
{
|
|
p: Math.PI * 2 * 2,
|
|
duration: driftDuration,
|
|
ease: "none",
|
|
onUpdate: function () {
|
|
drift.dx = Math.sin(drift.p) * DRIFT_X;
|
|
drift.dy = Math.sin(drift.p * 1.5) * DRIFT_Y;
|
|
applyCamera();
|
|
},
|
|
},
|
|
0,
|
|
);
|
|
}
|
|
|
|
// Halo: soft bloom at the anchor as the camera arrives, then hold.
|
|
if (haloOn) {
|
|
tl.fromTo(
|
|
halo,
|
|
{ opacity: 0, scale: 0.55, xPercent: -50, yPercent: -50 },
|
|
{
|
|
opacity: 0.85,
|
|
scale: 1,
|
|
xPercent: -50,
|
|
yPercent: -50,
|
|
duration: 0.75 * scale,
|
|
ease: "power2.out",
|
|
},
|
|
zoomStart + ZOOM * 0.5,
|
|
);
|
|
}
|
|
|
|
// OUT: only when exit != none; the default holds the last frame.
|
|
if (exitMode !== "none") {
|
|
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
|
|
if (exitMode === "up") {
|
|
tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
|
|
}
|
|
}
|
|
|
|
tl.seek(0);
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["ui-focus-zoom"] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|