Eases - .ease-NAME

Every tween the engine builds takes its curve from a single GSAP ease string, and .ease-NAME is how you hand it over on any element.

Syntax

Everything after the first hyphen is forwarded verbatim to GSAP's ease property - so write ease names with their native dot notation:

html
<div class="appear spawn-up time-1.6 ease-power3.out">…</div>
<div class="appear expand-all time-1 ease-back.out(2)">overshoots, then settles</div>

No hyphens allowed after ease-. ease-power4-inOut would be read as just power4 - use ease-power4.inOut. Dots, parentheses and commas are all fine: ease-steps(12), ease-elastic.out(1,0.4). If several ease-* classes are present, only the first one counts.

Omit the class entirely and every element falls back to defaults.ease ("back" - a slight, tasteful overshoot).

The flavor suffix

Most families come in three flavors: .in starts slow and accelerates away, .out launches fast and decelerates to a soft landing, and .inOut does both around a midpoint. A bare name behaves like .out - which is why the default ease-back overshoots on arrival rather than on departure.

Same animation, four flavors - watch how each box spends its two seconds:

none
power2.in
power2.out
power2.inOut

Character eases

Some families don't just interpolate - they perform. back overshoots past the target and swings back, elastic oscillates like a spring, bounce lands like a dropped ball, and steps() jumps between discrete values instead of gliding:

back.out(1.7)
elastic.out(1,0.4)
bounce.out
steps(9)

Built-in families

noneConstant velocity - no acceleration at all
power0 … power4Five steepness grades: linear, quad, cubic, quart, quint
sineGentle sinusoidal curve - soft, natural drift
expoExponential - explosive start or dramatic deceleration
circCircular - lazy start that snaps hard at the end (.in)
backOvershoots past the target before settling back
elasticSpringy overshoot that wobbles around the end value
bounceBounces into its final position like gravity took over
steps(N)N discrete jumps per second-equivalent - no interpolation
slow / slow.moCinematic slow-in/slow-out; .mo stretches it further

Every family (except none and steps) combines with the .in / .out / .inOut suffix, and parameterized forms accept parentheses: ease-back.inOut(3).

Where it applies

The engine reads one ease per element and feeds it to everything wired to it:

  • All entrance tweens - spawns, expands, clip reveals, curtains
  • .scroll entrances and scrubbed .scroll-progress
  • .spawn-text-* SplitText parts (each part shares the ease)
  • Loop settle segments - .shake, .bounce, .bell, .pulse
  • hover-/click- interactions and their mouseleave reset
  • .magnet / .magnet3d cursor tracking
  • css-* arbitrary-property tweens and .flip morphs

Two deliberate exceptions: typewriters default to ease-none (constant typing rate looks right - add an explicit ease-* to change it), and marquees always run linear because easing would stutter at the loop seam. Loop classes also keep their hand-tuned impact curves internally; your ease drives the final settle.

Changing the global default

js
import { defaults } from 'gclass-anims'

defaults.ease = 'power3.out'   // set BEFORE initAnimations()

Full catalogue

Since .ease-NAME forwards straight into GSAP, everything in the official reference works here - including plugin-based custom curves like CustomEase and CustomBounce once registered:

GSAP Eases documentation →