GSAP easeReverse: Tailored Easing for Reversible Menus

Independent Easing for Forward and Reverse Prevents Jarring Toggles

GSAP's easeReverse (new in v3.15) lets reverse animations use a distinct easing curve instead of mirroring the forward ease backwards. Forward ease-out (smooth entry) reverses to ease-in (sluggish exit) without it, feeling off for UI like menus or modals. Set easeReverse to reuse the forward ease adaptively or specify a new one, like easeReverse: 'elastic.out(0.3)', giving each direction unique character without duplicate timelines.

Apply it to tweens:

tl.to(item, {
  x, y, opacity: 0, rotation: gsap.utils.random(-30, 30),
  duration: 0.7,
  ease: 'expo',
  easeReverse: er('elastic.out(0.3)'),
});

This keeps dismissals snappy and playful, improving interruptible interactions.

Clip-Path Menu Reveal with Scattering Images

Open the menu by scattering cover images outward from viewport center while revealing via clip-path: start at polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%) and expand. Reset states with gsap.set() before building the timeline:

gsap.set(coverItems, { x: 0, y: 0, rotation: 0, opacity: 1 });
gsap.set(menu, { clipPath: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)' });
menuTimeline = createMenuTimeline(reverseEase);

Use a helper er() to toggle easeReverse on/off for comparison:

const er = (value) => {
  return easeReverseCheckbox.checked ? value || true : false;
};

Rebuild timeline on checkbox change via menuTimeline.revert() and rebuildMenuTimeline(), preserving progress with clamp(progress, 0, 1) and menuTimeline.progress(safeProgress).pause().

Interrupt Testing Separates Speed from Curve

Simulate mid-animation toggles: menuTimeline.timeScale(interruptReverseTimeScale).reverse(). A slider controls timeScale() for reverse speed, isolating it from easing curve effects. This reveals how easeReverse smooths interruptions—unchecked reverts to old behavior for side-by-side tests. Result: forward scatter feels explosive (expo), reverse elastic and bouncy, enhancing game-like playfulness without complexity.