teamai-test/.teamai/skills/common/hyperframes-animation/rules/nudge-curve.md

name, description, metadata

name	description	metadata
nudge-curve	Slow-fast-slow three-phase group slide — reposition a composed group (word rows, card stacks, lists) to reveal content or make room. No single built-in ease produces it; chain power3.in ramp → linear burst → power4.out tail (10/65/25 distance, tail ≥3× ramp-in in time).	tags slide, reposition, group-motion, easing, nudge, slow-fast-slow, reveal, layout

Nudge Curve

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

Rules

• The tail is ≥3× the ramp-in in TIME. If it still smacks: extend the tail's time (not distance) or use power5.out.
• Phase 2 stays linear — easing it loses the burst contrast.
• Reveal new content DURING phase 2 — the burst masks its appearance.
• Same ratios vertical; scale distances proportionally, keep the time ratios.
• A cascade arrival usually precedes this slide — see waterfall-entry.md.

JS

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.

Anti-patterns

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