Gsap Easing And Stagger · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

Gsap Easing And Stagger · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

Ease	Use for
`power1.out`, `power2.out`	Gentle motion for secondary elements (a caption fade, a small shift). NOT the entrance default.
`power3.out` (house default), `power4.out`	The standard long-tail settle. Entrances, title cards, hero reveals.
`sine.inOut`	Long, slow, calm motion. Crossfades, ambient drift.
`back.out(1.7)`	Overshoot then settle. RARE — explicitly-playful register only, never a default.
`elastic.out(1, 0.3)`	Springy bounce. Same playful-only rule; prefer a baked spring (see Spring Eases below).
`expo.inOut`	Snappy, dramatic. Quick transitions between hero scenes.
`none` (linear)	Camera moves with timed counterpoint, mechanical motion.

Family	Character	Typical use
`power1`–`power4`	Gentle (1) to aggressive (4) acceleration curves	General purpose. power3 is the house workhorse; power2 for gentle secondary motion, power4 for dramatic snaps
`back(N)`	Overshoot then settle. N controls how far past the target (1=subtle, 4=wild)	RARE — explicitly-playful register only, never a default. Keep N ≤ 2; prefer a baked spring at ζ 0.6–0.7 (physical settle, see Spring Eases)
`elastic(amp, freq)`	Spring bounce. amp=magnitude, freq=oscillation speed	RARE — same playful-only rule; the baked spring (below) is the physical version
`bounce`	Ball-drop bouncing	RARE — physical-comedy register only (something literally dropping)
`expo`	Extreme acceleration curve (much steeper than power4)	Premium/luxury reveals, dramatic entrances
`sine`	Smooth, organic, no hard edges	Ambient float, breathing, Ken Burns, anything that loops. `.inOut` for yoyo motion
`circ`	Circular acceleration (starts very fast, ends very gentle or vice versa)	Camera moves, scene transitions, orbital motion
`steps(N)`	Discrete N-step jumps, no interpolation	Typing effects, cursor blink, counter ticks, retro/digital aesthetics

// springEase — a damped spring's exact position curve as a GSAP ease.
// response         ≈ seconds one oscillation would take (0.3–0.6 for entrances)
// dampingFraction  1.0       = critically damped — smooth settle, NO overshoot (house default)
//                  0.80–0.85 ≈ the iOS system register — ~1–1.5% overshoot, felt not seen
//                  0.60–0.70 = explicitly playful — ~5–10% overshoot (rare; replaces back.out)
function springEase({ response = 0.5, dampingFraction = 1 } = {}) {
  const w = (2 * Math.PI) / response; // undamped natural frequency
  const z = dampingFraction;
  let pos; // x(t): 0 → 1, starting at rest (v0 = 0)
  if (z < 1) {
    const wd = w * Math.sqrt(1 - z * z);
    pos = (t) => 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + ((z * w) / wd) * Math.sin(wd * t));
  } else if (z > 1) {
    const wo = w * Math.sqrt(z * z - 1);
    pos = (t) =>
      1 - Math.exp(-z * w * t) * (Math.cosh(wo * t) + ((z * w) / wo) * Math.sinh(wo * t));
  } else {
    pos = (t) => 1 - Math.exp(-w * t) * (1 + w * t);
  }
  // Settle time: last moment the curve sits outside ±0.1% of target.
  // Fixed-step scan, runs once at setup — deterministic (no Math.random / Date.now).
  const EPS = 0.001;
  const rate = z <= 1 ? z * w : (z - Math.sqrt(z * z - 1)) * w; // slowest decay mode
  const SCAN = 12 / rate;
  const N = 4800;
  let T = SCAN;
  for (let i = N; i >= 0; i--) {
    const t = (i / N) * SCAN;
    if (Math.abs(1 - pos(t)) > EPS) {
      T = ((i + 1) / N) * SCAN;
      break;
    }
  }
  const xT = pos(T);
  return {
    duration: T, // use as the tween's duration — the settle time IS the physics
    ease: (p) => pos(p * T) + p * (1 - xT), // normalized so ease(1) === 1 exactly
  };
}

const settle = springEase({ response: 0.4 }); // critically damped → duration ≈ 0.59s
tl.fromTo(
  "#hero",
  { scale: 0, opacity: 0 },
  { scale: 1, opacity: 1, duration: settle.duration, ease: settle.ease },
  0.2,
);

dampingFraction	overshoot	register
1.0 (default)	none (monotone)	The house settle — the exact curve `power3.out` approximates. Product / enterprise / serious tone.
0.80–0.85	~1–1.5%	“Alive, not bouncy” — the iOS system default register. The overshoot is felt, not seen.
0.60–0.70	~5–10%	Explicitly-playful ONLY (same rule as `back.out`, which this replaces — a spring’s second-order settle reads physical where `back` reads cartoon).
< 0.55	> 12%	Don’t. Cartoon-wobble territory.

response	duration (ζ=1)	feel
0.25–0.35	0.37–0.51s	tight snap — chips, small UI
0.35–0.50	0.51–0.74s	standard entrance
0.50–0.70	0.74–1.03s	weighted hero landing — check the `t ≤ 0.5s` visibility rule

gsap.fromTo(
  ".item",
  { y: 24, opacity: 0 },
  {
    y: 0,
    opacity: 1,
    stagger: {
      each: 0.08, // delay between each
      from: "center", // "start" | "end" | "center" | "edges" | "random" | index
      amount: 0.6, // total stagger time (overrides each if both set)
      grid: "auto", // for 2D stagger
      axis: "x" | "y",
    },
  },
);

let mm = gsap.matchMedia();
mm.add(
  {
    isDesktop: "(min-width: 800px)",
    reduceMotion: "(prefers-reduced-motion: reduce)",
  },
  (context) => {
    const { isDesktop, reduceMotion } = context.conditions;
    gsap.to(".box", {
      rotation: isDesktop ? 360 : 180,
      duration: reduceMotion ? 0 : 2,
    });
  },
);