Power easing

幂次缓动 · ease-power

Bend a linear 0→1 into fast-then-slow, slow-then-fast, or slow at both ends. The most used easing on the site.

Easing decides whether something moves like a real object. out starts fast and lands softly (entrances, responses to clicks); in starts slow and leaves fast (exits); inOut is gentle at both ends (moving between two places). A larger exponent means a steeper curve: an out curve starts at p times linear speed.

Formula

in    f(t) = t^p
out   f(t) = 1 − (1 − t)^p
inOut f(t) = t < ½ ? (2t)^p / 2 : 1 − (2(1 − t))^p / 2

f′(0) for out = p   (starts p× faster than linear)

Parameters

	This page	Mature libraries
p	3 (cubic)	GSAP `power1…4` = p 2…5GSAP's powerN uses exponent N+1: `power4` is quint (p = 5), not quart.
kind	out	GSAP default `power1.out`
duration	1 s	UI transitions 150–300 ms; entrances can be longerEmil Kowalski: keep UI transitions under 300 ms

Doing it well

Enter with out, exit with in, and make exits about a third faster than entrances. Keep symmetric inOut for “from here to there”, not for popovers.Material 3 easing tokens; Emil Kowalski, “Great animations”
Write the exponent, not just the name. A spec saying power4.out means 1 − (1 − t)^5 in GSAP; hand-writing ^4 silently changes the curve.GSAP src/gsap-core.js:1066–1068
The exponent does not have to be an integer. iris opens with 1 − (1 − t)^3.2, between cubic and quart — exactly the breath the design wanted.www-motion/rewrite/iris/iris.js:2
Easing shapes, it does not set the duration. The same curve feels completely different over 0.2 s and 1.2 s; tune them together.

In our cases

62 studies use power easing, mostly as hand-written formulas (1 − (1 − t)^n, t*t*t). Among named GSAP eases, power3.out and power4.out lead (8 studies each). The site's signature blur-rise-in entrance (1 s power4.out, 0.12 s stagger) appears in 6 studies.

Reference implementation · basics.js

/** Power easing with any exponent (2 = quad, 3 = cubic, 4 = quart; 3.2 is fine too). */
export function power(p = 3, kind = 'out') {
  if (kind === 'in') return t => t ** p;
  if (kind === 'out') return t => 1 - (1 - t) ** p;
  return t => (t < 0.5 ? (2 * t) ** p / 2 : 1 - (2 * (1 - t)) ** p / 2);
}