elastic.out and bounce.out
elastic.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. elastic.out springs past and oscillates to rest like a plucked string; bounce.out drops onto the target and rebounds a few times with shrinking height, like a ball hitting the floor.
Updated June 30, 2026
How elastic.out and bounce.out work
Both eases overshoot. The difference is what happens after the overshoot. elastic.out shoots past the end value and wobbles around it with decreasing amplitude before settling, so it reads as a spring. bounce.out never goes past the end value, it lands on it and rebounds back up a few times with each bounce shorter than the last, so it reads as impact and gravity.
elastic.out takes two config numbers: elastic.out(amplitude, period). The default is elastic.out(1, 0.3). Amplitude controls how far it overshoots, period controls the spacing of the wobble (smaller period means more, tighter oscillations). bounce.out takes no config, the number and decay of the bounces is fixed.
Both are part of GSAP core, no plugin or registration needed. They sit at the high-amplitude end of the ease scale: expo.out settles with no overshoot, back.out overshoots once and comes back, elastic.out overshoots and oscillates, bounce.out rebounds. Reach further down that list only when the extra motion is the point.
Use it for
- Pop-in reveals where each element scales from 0 and you want it to feel alive, not just appear (
elastic.outon ascaletween) - Playful confirmations, a like button, a toggle, a badge landing with personality
- Toy-like or game UI where motion is part of the brand, not a microinteraction you want to disappear
- Something dropping into place from off-screen where
bounce.outsells weight and impact
Use something else when
- It's a standard UI transition (hover, dropdown, modal), use
expo.out, elastic and bounce draw too much attention - You want one subtle overshoot without the oscillation, use
back.out(1.7)and tune the number down towardback.out(1.1)for a gentler nudge - The overshoot fights the layout, a
scalepast 1 or anxpast the target can clip against a parent withoverflow: hidden, switch to a non-overshoot ease or give the element room - You need a specific custom curve the built-ins don't hit, draw it with
CustomEase
Overshoot needs a property that can overshoot
scale, x, y, rotation. On opacity (0 to 1) the overshoot has nowhere to go, the value clamps and you lose the effect. Pair them with a transform, not a fade.Used in these Annnimate components
Both of these components are built on the overshoot family. They default to back.out(1.7) (one clean overshoot) and expose the ease through data-anm-ease, so swapping in elastic.out or bounce.out is a one-attribute change when you want a springier or bouncier read.
- Popping Text scales each character from 0 with an overshoot ease and a stagger, so the line pops in letter by letter. Set
data-anm-ease="elastic.out(1, 0.3)"and the pop turns into a spring. - Random Rotate snaps elements to a fresh random rotation with an overshoot ease on hover. Switching it to
elastic.outmakes the rotation wobble into place instead of settling clean.
Respect reduced motion
Elastic and bounce are the highest-amplitude eases in the set, which is exactly the kind of motion that bothers people with vestibular sensitivity. prefers-reduced-motion has crossed 50% of mobile sites (up from 34% in 2022, Web Almanac 2024 Accessibility chapter), so a real share of your users have it on. Gate the overshoot behind gsap.matchMedia and fall back to an instant or expo.out-eased version.
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.
Random RotateEach element drops in at its own random angle as you scroll to it, for a loose, hand-placed feel.
Card FanA tight stack of image cards that fans open into a slight arc when you hover it, then feathers back to rest when you leave.Common questions
- What does elastic.out(1, 0.3) actually mean?
- The first number is amplitude, the second is period. Amplitude (1 is the default) controls how far the tween overshoots its end value. Period (0.3 is the default) controls the spacing of the wobble after the overshoot, smaller period means more oscillations packed in tighter. Raise amplitude for a bigger spring, lower period for a busier wobble.
- elastic.out vs bounce.out, which one do I want?
- elastic.out springs past the target and oscillates around it before resting, so it feels like a spring or rubber band. bounce.out lands on the target and rebounds up a few times with shrinking height, so it feels like a ball hitting the floor. Use elastic for springy pop-ins, use bounce for things dropping into place where you want a sense of weight and gravity.
- How do I use elastic.out in GSAP?
- Pass it as the ease string: ease: "elastic.out(1, 0.3)". It's part of GSAP core so there's no plugin to register. It works best on a transform that can visibly overshoot, scale, x, y, or rotation. It does nothing useful on opacity because the value clamps at 1.
- Why does my elastic ease look like it does nothing?
- Usually one of two things. Either you put it on opacity (or another clamped 0-to-1 property) where the overshoot has nowhere to go, move it to a scale or transform. Or the duration is too short, elastic and bounce need room to play out the oscillation, give them 0.7s to 1.2s. At 0.3s the wobble gets crushed and it just looks like a normal ease.
- Is bounce.out configurable like back.out and elastic.out?
- No. back.out takes an overshoot amount (back.out(1.7)) and elastic.out takes amplitude and period (elastic.out(1, 0.3)), but bounce.out has no parameters, the count and decay of the bounces are fixed. If you need a different bounce rhythm, build the curve with CustomBounce or CustomEase.
