What's the difference between power2.inOut and expo.inOut?

power2.inOut is gentle - the curve is shallow enough that the middle 'cruise' phase is long. expo.inOut is aggressive - the start and end ramps are steep, so the motion feels like it accelerates fast, cruises briefly, then brakes hard. Use power2 for invisible smoothing, expo when the bracket-shape of the curve is the point.

Should I use ease-in-out for entrance animations?

Usually no. Entrance animations benefit from an ease-out feel - the element decelerates into its rest position. ease-in-out front-loads slow motion, which reads as 'hesitant' on entrance. Reserve in-out for transitions where both states are real (not 'arriving from offscreen').

Does ease-in-out work well with stagger?

It works, but you'll lose the 'cascade' feel because each staggered child starts AND ends slowly. For staggered reveals where you want the rhythm to feel snappy, use `power2.out` or `expo.out` instead. Save in-out for staggers where the motion is supposed to feel gentle.

What ease should a yoyo (back and forth) tween use?

Almost always ease-in-out. A yoyo with `power.out` looks weird because each direction starts fast and ends slow - the rhythm has a 'limp'. ease-in-out keeps both directions symmetric so the back-and-forth feels balanced. `sine.inOut` is the smoothest choice for slow, continuous yoyos.

Is sine.inOut different from power2.inOut?

Slightly. sine.inOut follows a true sine curve - very gentle ramps, long cruise. power2.inOut is sharper at the ends. For looping/continuous motion (drift, breathe, mesh gradient) sine is the cleanest. For state transitions you want to feel intentional, power2 or power3 reads better.

Easing

ease-in-out

ease-in-out is the family of GSAP eases that accelerate from rest, cruise through the middle, and decelerate to rest. The motion is symmetric around the midpoint, which makes it the right ease for any tween that should feel both deliberate at the start and intentional at the end. Common variants: `power1.inOut` through `power4.inOut`, plus `expo.inOut`, `sine.inOut`.

Updated June 2, 2026

Mechanics

How ease-in-out works

An ease-in-out curve is power.in for the first half and power.out for the second. The element rolls into motion, hits peak velocity at the midpoint, then rolls to a stop. Compared to power.out (which starts fast and brakes), ease-in-out feels more 'controlled' - both endpoints are quiet.

script.js

When

Use ease-in-out for

Cross-fades between two states (color transitions, panel swaps)
Header hide/show on scroll - both directions should feel deliberate
Sliding panels where the start AND end matter equally
Repeated motion (yoyo, repeat) where asymmetric curves make each iteration feel uneven
Continuous motion (background pans, mesh gradients) where the curve is meant to be invisible

Alternatives

Use something else when

Entrance reveals where the element should feel like it lands - use power3.out or expo.out
Hover microinteractions where you want immediate response - use back.out or expo.out
Anything that should feel snappy or assertive - in-out curves read as gentle, never punchy
Scroll-scrubbed animations where the scrub itself adds the smoothing - use none (linear)

In production

Used in these Annnimate components

The Multi Flip uses ease-in-out on the card-to-card transitions so each flip feels controlled at both ends
The Background Color scroll component uses ease-in-out on the color tween so the transition is symmetric and doesn't 'pop'
The Hide Header uses power3.inOut on the hide/show motion - both directions need to feel deliberate
The Mesh Gradient uses sine.inOut for the continuous color drift so the loop has no visible seam

Used in components

See it running in production

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.

Background ColorThe section background and text colours shift smoothly as you scroll from one zone to the next, so the page changes mood without any hard breaks.

Hide HeaderA nav bar that hides when you scroll down and comes back when you scroll up, so the content gets the space.

Mesh GradientA full-screen animated mesh gradient with colour points that drift around slowly on their own, and your cursor stirs the colours like fluid as you drag through them.

FAQ

Common questions

What's the difference between power2.inOut and expo.inOut?: power2.inOut is gentle - the curve is shallow enough that the middle 'cruise' phase is long. expo.inOut is aggressive - the start and end ramps are steep, so the motion feels like it accelerates fast, cruises briefly, then brakes hard. Use power2 for invisible smoothing, expo when the bracket-shape of the curve is the point.
Should I use ease-in-out for entrance animations?: Usually no. Entrance animations benefit from an ease-out feel - the element decelerates into its rest position. ease-in-out front-loads slow motion, which reads as 'hesitant' on entrance. Reserve in-out for transitions where both states are real (not 'arriving from offscreen').
Does ease-in-out work well with stagger?: It works, but you'll lose the 'cascade' feel because each staggered child starts AND ends slowly. For staggered reveals where you want the rhythm to feel snappy, use power2.out or expo.out instead. Save in-out for staggers where the motion is supposed to feel gentle.
What ease should a yoyo (back and forth) tween use?: Almost always ease-in-out. A yoyo with power.out looks weird because each direction starts fast and ends slow - the rhythm has a 'limp'. ease-in-out keeps both directions symmetric so the back-and-forth feels balanced. sine.inOut is the smoothest choice for slow, continuous yoyos.
Is sine.inOut different from power2.inOut?: Slightly. sine.inOut follows a true sine curve - very gentle ramps, long cruise. power2.inOut is sharper at the ends. For looping/continuous motion (drift, breathe, mesh gradient) sine is the cleanest. For state transitions you want to feel intentional, power2 or power3 reads better.

PreviousCustomWiggleCustomWiggle is a GSAP easing plugin that makes a value oscillate back and forth a set number of times before settling on its end value.NexteaseReverseeaseReverse is a GSAP tween property, added in 3.15, that sets a separate ease for when the playhead moves backward.

Related conceptsexpo.out power4.out back.out CustomEase