power4.out
power4.out is GSAP's most aggressive standard ease-out, decelerating from very high initial velocity to a near-instant stop at the end. It's the curve to reach for when an element needs to feel like it was thrown into place, not eased. Use it for hero reveals, scroll-driven hits, and any motion where the entrance should land hard.
Updated June 2, 2026
How power4.out works
GSAP's power ease family takes a base curve and raises it to a power - higher numbers mean more aggressive curves. power1.out is nearly linear; power2.out matches CSS's default ease-out; power3.out is the standard 'cinematic' choice; power4.out is the most aggressive standard option. Beyond that, expo.out and circ.out are even more extreme.
On a 1-second tween, roughly 70% of the motion happens in the first 200ms. The element starts fast, brakes hard, and settles. The brain reads it as 'arrival' rather than 'transition'.
Use power4.out for
- Hero text reveals where the headline should land assertively on first paint
- Scroll-triggered character stagger where each char should feel like it 'pops' in
- Cinematic title cards where the motion is the moment, not the setup
- Modal entrances that should feel decisive rather than gentle
Use something else when
- UI microinteractions (button hover, tooltip) - too aggressive, prefer
expo.outorpower2.out - Calm fade-ins where the motion should be invisible -
power1.outorpower2.out - Bouncy 'landing' feel where you want overshoot -
back.outorelastic.out - Anything under 200ms - the curve is so steep that short durations look indistinguishable from a snap
Used in these Annnimate components
- The Popping Text component uses power4.out on character stagger so each letter brakes hard at its rest position
- The Multi Flip scene uses power4.out on the final hold of each card so the gallery feels 'placed' rather than 'dropped'
- The Cinematic Text uses power4.out on the line wipe so the reveal lands with weight
- The Text Split Zoom combines power4.out with a scale tween for the front-and-center title moment
See it running in production
Popping TextLetters pop into place one by one, scaling up from nothing with a little bounce and a random tilt.
Multi FlipA stack of cards that fans out from a messy pile into a neat grid as you scroll, each one starting overlapped at a random angle.
Cinematic TextBig headlines slide in from the sides as you scroll, by line, word or letter.
Text Split ZoomAn image grows from nothing to full size right between two halves of a headline, pushing the words apart as it opens.Common questions
- What's the difference between power4.out and expo.out?
- power4.out brakes hard but still has a tail. expo.out brakes harder still - by the last 10% of the tween, the element is barely moving. expo.out is GSAP's default for UI; power4.out is the slightly less extreme alternative when the curve needs to feel decisive but not absent.
- Can I use power4.out for short durations?
- Below 300ms the curve is steep enough that you can't perceptually distinguish it from
none(linear) or a snap. Use it on 500ms+ tweens where the deceleration is long enough to read. - Does power4.out work for reverse playback?
- Yes, but plain reverse becomes power4.in, which feels sluggish (slow start, fast end). For paired open/close timelines set
easeReverse: true(GSAP 3.15+) so the .out feel persists in reverse direction. For symmetry without that flag, pair power4.out forward with power4.out on a separate close timeline. - Is there a power5.out?
- No - the power family stops at 4 in GSAP's standard ease pack. For more extreme curves, use
expo.out,circ.out, or author a CustomEase via the CustomEase plugin. - When should I prefer power3.out over power4.out?
- power3.out is the safer default - it has the cinematic deceleration feel without crossing into 'snapped into place' territory. Use power3.out for most reveals; reserve power4.out for moments where the brake should be unmistakable.
