Skip to main content

3.15 Release

· 3 min read
Jack Doyle
Jack Doyle
Founder and Code Connoisseur
Cassie Evans
Cassie Evans
Developer Education

Introducing adaptive directional easing​

Ever called reverse() on an animation and noticed the motion feels... off? That's because reversing an animation also reverses the easing curve, so an ease-out becomes an ease-in. Now with easeReverse - you’ve got more creative control over how that reverse animation feels!

easeReverse is a new tween property that lets you define a different ease for when the playhead moves backwards. Set it to true to reuse the same ease as you've defined for the forwards direction, or pass in any ease string for a completely different feel.

gsap.to(".box", {
  x: 300,
  ease: "expo.out",
  easeReverse: true, // same ease, adapted for reverse
});
gsap.to(".box", {
  scale: 1,
  opacity: 1,
  ease: "back.out(1.7)",
  easeReverse: "sine.in", // totally different exit feel
});

Simple example​

loading...

Interactive demo​

The clever bit - GSAP recalculates easing from precisely where the playhead changed direction and applies it to the remaining distance. So it works smoothly even if you interrupt a tween mid-animation.

loading...

Easing tip

Combine easeReverse with timeScale() for a snappier close:

isOpen ? tl.timeScale(1).play() : tl.timeScale(1.5).reverse();

UI interactions​

loading...

Radial Menu​

loading...

easeReverse in timelines​

easeReverse is a tween-level property, which works perfectly in timelines, no matter how deeply nested your tweens are. When a parent timeline reverses, every child tween with an easeReverse value will adjust it's easing dynamically.

You can also set easeReverse in your timeline defaults and it'll cascade down to the child tweens:

let tl = gsap.timeline({
  defaults: {
    ease: "back.out",
    easeReverse: "expo.in",
  }
});

tl.to(".hero", { y: -100 }) // ease: "back.out", easeReverse: "expo.in"
  .to(".overlay", { opacity: 1, easeReverse: "power4.out" }) // ease: "back.out", easeReverse: "power4.out"
  .to(".cta", { scale: 1 }, 0.2); // ease: "back.out", easeReverse: "expo.in"

tl.reverse();

When should I reach for easeReverse?​

  • Toggleable UI, modals, menus, drawers, tooltips.
  • Interruptible, reversible animations, interactions where the user can change direction at any point.
  • Any reverse() call where the default backwards easing doesn't look right.

What about yoyoEase?​

easeReverse is everything yoyoEase aspired to be. 😎 Think of it like a fully adaptive version of yoyoEase that even works if you change direction mid-tween. Therefore, yoyoEase has been deprecated. As of version 3.15.0, GSAP internally replaces yoyoEase with easeReverse (it's fully backwards-compatible).

More demos on Codepen​

See the full collection here.

Lots of minor improvements and fixes​

See the full list here.

Resources​

Contents