Setting the file. One moment.
Skill 18 · Hyperframes Animation
Subchapter 18.88
rules/nudge-curve.mdMarkdown3 KBView on GitHub
Slow-fast-slow repositioning of a composed group (word rows, card stacks, lists) to
reveal content or make room. In-scene group slide — not a seam. No single built-in
ease produces it — power4.inOut smacks to a stop. Chain three tweens on one property:
| Phase | Ease | Distance | Time | Feel |
|---|---|---|---|---|
| 1 ramp-in | power3.in | ~10% | ~20% | barely moves — motion registers, no jolt |
| 2 burst | none (linear) | ~65% | ~18% | ~2× average px/frame — purposeful |
| 3 tail | power4.out | ~25% | ~62% | decaying creep to rest — kills the smack |
power5.out.Reference values for a 270px leftward slide (0.57s total). Scale distances proportionally for other travels; preserve the TIME ratios; tail ≥3× ramp-in.
var t = /* start after content settles */;
tl.to(".text-row", { x: -30, duration: 0.12, ease: "power3.in" }, t); // ramp-in: 11% dist / 21% time
tl.to(".text-row", { x: -210, duration: 0.10, ease: "none" }, t + 0.12); // burst: 67% dist / 18% time
tl.to(".text-row", { x: -270, duration: 0.35, ease: "power4.out" }, t + 0.22); // tail: 22% dist / 61% time
// vertical: same ratios on y. 150px variant: -15 / -115 / -150 at the same times.| Don’t | Instead |
|---|---|
Single ease for a group slide (power4.inOut, slow()) | The three-phase chain above |
| Nudge tail shorter than 3× the ramp-in | Extend the tail’s TIME, not its distance |