Setting the file. One moment.
Skill 18 · Hyperframes Animation
Subchapter 18.94
rules/scale-swap-transition.mdMarkdown5 KBView on GitHub
Simulates a “morph” between two DOM elements by overlapping exit and entrance scale animations. Lighter weight than card-morph-anchor.md (which morphs container dimensions — use that for SHAPE changes; this rule is for SAME-shape state swaps) and easier than SVG path interpolation.
At a single trigger, two coordinated tweens fire:
1.0 → EXIT_SCALE + opacity 1 → 0, fast power2.in (rushing away).EXIT_SCALE → 1.0 + opacity 0 → 1, back.out(BOUNCE_FACTOR) (arriving with weight).A small OVERLAP window during which both are mid-tween creates the morph illusion; the incoming sits on top via z-index so the outgoing’s fade-tail doesn’t bleed through.
<!-- Both cards position: absolute; inset: 0 in one fixed-size wrapper — same
footprint, same transform-origin: 50% 50%. Incoming starts opacity: 0,
transform: scale(EXIT_SCALE), z-index above the outgoing. -->
<div class="swap-wrap">
<div class="card outgoing" id="outgoing">{outgoingIcon} {outgoingLabel}</div>
<div class="card incoming" id="incoming">
{incomingIcon} {incomingLabel}
<div class="sub" id="sub">{incomingSubline}</div>
</div>
</div>// Outgoing: shrink + fade fast
tl.to(
"#outgoing",
{ scale: EXIT_SCALE, opacity: 0, duration: EXIT_DUR, ease: "power2.in" },
TRIGGER,
);
// Incoming: pops in with overshoot, starting OVERLAP before the exit finishes
tl.to(
"#incoming",
{ scale: 1.0, opacity: 1, duration: ENTER_DUR, ease: `back.out(${BOUNCE_FACTOR})` },
TRIGGER + EXIT_DUR - OVERLAP,
);
// Inner content reveals AFTER the incoming settles
tl.fromTo(
"#sub",
{ opacity: 0, y: SUB_REVEAL_Y_PX },
{ opacity: 1, y: 0, duration: SUB_REVEAL_DUR, ease: "power3.out" },
TRIGGER + EXIT_DUR + SUB_REVEAL_DELAY,
);TRIGGER_AB / TRIGGER_BC; each transition is its own tween pair, the previous incoming becoming the next outgoing. State-evolution narratives (early → mid → final labels).| token | range | notes |
|---|---|---|
| TRIGGER | ≥ outgoing settled + a presence-dwell | the outgoing must “land” before transforming |
| EXIT_DUR | 0.3–0.5 s | |
| ENTER_DUR | 0.45–0.7 s | longer than EXIT_DUR so the overshoot can settle |
| OVERLAP | 0.1–0.2 s | >0.3 s both are clearly visible together (no morph); <0.05 s leaves a visible empty gap |
| EXIT_SCALE | 0.6–0.8 | smaller exits feel dramatic but risk reading as “vanish” instead of “morph” |
| BOUNCE_FACTOR | 1.4 soft · 1.8 firm · 2.2 cartoony | |
| SUB_REVEAL_DELAY | 0.2–0.4 s | reveals during the morph compete with the swap for attention |
| BRAND_REVEAL_AT | < TRIGGER | context (brand, eyebrow) sets the stage early; revealed AT the swap it competes with the headline beat |
transform-origin: 50% 50% — different origins make the morph read as one thing teleporting elsewhere.power2.in, incoming back.out; reversed, the swap feels mechanical.position: absolute; inset: 0 in the same fixed-size wrapper (sized to fit both states; the wrap never resizes).display: none the outgoing after the fade — leave it at opacity: 0 so layout doesn’t reflow.press-release-spring (a button press TRIGGERS the swap — cause and effect) · card-morph-anchor (shape-changing alternative) · reactive-displacement (when the replacement should read as a causal collision) · sine-wave-loop (idle breathing on the final state).