Easing

easeReverse

easeReverse is a GSAP tween property, added in 3.15, that sets a separate ease for when the playhead moves backward. Normally reversing a tween retraces its forward curve, so an `expo.out` entrance turns into an `expo.in` feel on the way back, easeReverse lets you keep the reverse leg eased-out instead.

Updated July 1, 2026

Mechanics

How easeReverse works

When a tween plays forward, GSAP walks the ease curve from 0 to 1. When it reverses, it walks the same curve from 1 back to 0. That means the shape flips direction too: the slow tail of an expo.out is now at the start of the reverse, and the fast part lands at the end, so the return reads like an expo.in. On a hover-out or a drawer close, that abrupt finish is exactly the wrong feel.

easeReverse decouples the two directions. Set it to true to reuse the forward ease on the reverse leg, so the return eases into rest the same way the entrance did. Pass any ease string instead if you want the reverse to feel different from the forward pass.

script.js

It's a tween-level property but it's timeline-aware: when a parent timeline reverses, every child tween that carries an easeReverse value flips its curve automatically. Setting easeReverse in the gsap.timeline({ ... }) config does nothing, it's a silent no-op. Put it in each .to() / .from() / .fromTo() vars object instead.

yoyoEase is the old name

yoyoEase was deprecated in GSAP 3.15 and is internally replaced by easeReverse (fully backward-compatible, so old code keeps working). Write new code with easeReverse, don't reach for yoyoEase.
When

Use it for

  • Hover in / hover out driven by one reversible tween, where both directions should ease-out into their resting state
  • Drawers, modals, and dropdowns built as a single timeline that plays forward to open and reverse()s to close
  • yoyo: true repeats where each leg should decelerate rather than one leg feeling like an ease-in
  • Toggle states (a menu button, an accordion) where the open and close share one timeline but need matching feel in both directions
Alternatives

Use something else when

  • The ease is already symmetric, like power2.inOut or sine.inOut, the forward and reverse curves look identical so easeReverse adds nothing
  • Open and close have genuinely different choreography, not just a different ease, build two paired timelines (openTl + closeTl) instead of one reversible one
  • You're on a CSS transition, not GSAP, set a different transition-timing-function per state class
  • You need physics-style motion, use gsap.quickTo with damping or an inertia plugin rather than a fixed reverse ease
In production

Used in these Annnimate components

The easeReverse decision shows up any time a component runs one tween or timeline in both directions rather than firing a fresh animation per state. Two places in the library where that reversal is the whole interaction:

  • The Magnetic Button snaps back when the cursor leaves, which is the exact case easeReverse is built for: the return should ease out into rest, not retrace the pull into an abrupt stop
  • The Morphing Dialog opens and closes off the same reversible timeline, so controlling the reverse ease keeps the close feeling as deliberate as the open instead of accelerating shut

Still gate it behind reduced motion

easeReverse is a feel tweak, not an exemption from accessibility. prefers-reduced-motion adoption passed 50% of mobile sites in 2024 (up from 34% in 2022, per the HTTP Archive Web Almanac), so keep the whole thing inside a gsap.matchMedia() block and collapse it to an instant state when reduce is set.
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.Morphing DialogA card that grows into a real dialog box, the shared bits sliding smoothly from the card into the open state and back when you close it.
FAQ

Common questions

What's the difference between easeReverse and yoyoEase?
They do the same job, easeReverse is the current name. yoyoEase was deprecated in GSAP 3.15 and is internally swapped for easeReverse, so it stays backward-compatible, but easeReverse is more capable: it adapts even if you change direction mid-tween, which yoyoEase couldn't. Write new code with easeReverse.
Why does easeReverse do nothing when I set it on my timeline?
It's a tween-level property. Passing it in gsap.timeline({ easeReverse: true }) is a silent no-op. Set it inside each .to() / .from() / .fromTo() vars object instead. It's still timeline-aware, when the parent timeline reverses, every child tween that carries an easeReverse value flips its curve automatically.
What happens on reverse if I don't set easeReverse at all?
GSAP retraces the forward ease backward. Because that flips the curve's direction, an ease-out entrance feels like an ease-in on the way back, the slow part lands at the start of the reverse and the motion accelerates into its end. For hover-out and close animations that abrupt finish usually reads wrong, which is the problem easeReverse fixes.
Does easeReverse affect yoyo repeats?
Yes. On a tween with yoyo: true, each backward leg of the cycle uses the easeReverse curve. Set easeReverse: true so both directions decelerate, otherwise every other pass feels like an ease-in.
Which GSAP version added easeReverse?
3.15. All GSAP plugins have been free for commercial use since 3.13, so there's no paid tier gating any of this, easeReverse ships in the core.
Previousease-in-outease-in-out is the family of GSAP eases that accelerate from rest, cruise through the middle, and decelerate to rest.Nextelastic.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.
Related conceptsyoyoCustomEaseexpo.out