Easing

expo.out

expo.out is a GSAP easing function that starts an animation fast and decelerates exponentially to its final value. It's the default ease for almost every UI interaction in production GSAP code because the rapid start feels responsive while the long tail makes the landing read as intentional.

Updated June 1, 2026

Mechanics

How expo.out works

The curve maps progress through an exponential function: 1 - 2^(-10t) where t is the normalized time from 0 to 1. The first 10% of the duration covers roughly 50% of the distance; the last 50% covers only about 6%.

That asymmetry is why it feels so responsive - by the time the user's eye registers the movement, the element is already 60-70% of the way to its destination. The deceleration into rest reads as 'settling' rather than 'stopping abruptly'.

script.js
When

Use it for

  • Hover-in microinteractions (button scale, card lift)
  • Reveal animations (elements appearing from outside the viewport)
  • Modal and drawer entrances
  • Any UI transition where 'responsive feel' matters more than 'luxurious feel'
Alternatives

Use something else when

  • Exits - use expo.in (the mirror) so the element accelerates away
  • Hero entrances on landing pages - power4.out reads slightly more cinematic
  • Bouncy 'land with weight' feel - back.out(1.7) overshoots and settles
  • Physics-driven motion - gsap.quickTo with damping, not a fixed ease
In production

Used in these Annnimate components

The default ease across the Annnimate library is expo.out - it's specified in gsap.defaults() on most animations. Two canonical examples:

  • The Magnetic Button uses expo.out for the spring-back when the cursor leaves
  • The Dual Scramble text animation uses expo.out on the character-stagger reveal

Tuning tip

If you're tuning an Annnimate component and want it to feel snappier, shorten the duration before switching the ease. expo.out at 0.4s feels snap-responsive; the same ease at 1.2s feels sluggish.
Used in components

See it running in production

Magnetic ButtonThe button and its text gently pull toward your cursor and drift with it, so it feels like it's reaching for you.Dual ScrambleText scrambles through a brand colour and then settles into its final colour.
FAQ

Common questions

When should I use expo.out vs power4.out?
They're nearly identical mathematically (both are quartic-style curves), but expo.out has a slightly steeper start and a slightly longer tail. For UI microinteractions under 0.6s, expo.out reads more 'snap to rest'. For hero entrances and longer reveals, power4.out feels marginally more luxurious. In practice, GSAP's own docs recommend expo.out as the default and that's what production code uses.
Does expo.out work for entrances or just exits?
Despite the 'out' name, expo.out is the right choice for ENTRANCES too. The naming refers to where the easing rate is - easing-out means the slowest rate is at the end (the landing), which is exactly what you want when something arrives on screen. Use expo.in only for exits where the element accelerates away.
Why does my animation feel sluggish with expo.out?
Usually because the duration is too long. expo.out has a long exponential tail - at duration 1.0s, the last 30% of the tween is nearly imperceptible movement. For UI, keep durations between 0.4s and 0.8s with expo.out. If you need a longer animation, switch to power2.out or a custom ease.
Previouselastic.out and bounce.outelastic.out and bounce.out are GSAP overshoot eases that let an element pass its target value and settle back, instead of decelerating cleanly into it.Nextpower4.outpower4.out is GSAP's most aggressive standard ease-out, decelerating from very high initial velocity to a near-instant stop at the end.
Related conceptspower4.outease-in-outback.out