A Playful Clip Menu with GSAP’s easeReverse

Some days in the past, the GSAP crew launched an replace which launched a small however very useful addition for reversible animations: easeReverse.

The thought is easy: while you reverse a GSAP animation, the easing curve is reversed too. That always makes technical sense, however visually it will probably really feel off. An ease-out animation performed backwards turns into an ease-in, which implies a UI factor that entered easily would possibly really feel a bit sluggish or awkward when dismissed.

With easeReverse, we can provide the reverse course its personal easing habits. It will possibly reuse the ahead ease adaptively, or it will probably use a very totally different ease. That is particularly helpful for toggleable UI like menus, drawers, modals, tooltips, and different interruptible interactions.

On this demo, we use it for a small (game-inspired) menu interplay.

When the menu opens, a set of canopy pictures scatter outward from the middle of the viewport. On the similar time, the menu is revealed with a clip-path animation. The fascinating half occurs while you shut the menu: with easeReverse enabled, the returning movement will get its personal reverse really feel as an alternative of merely taking part in the unique ease backwards:

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

In order that we will visualize the magic, a small helper lets us change the function on and off:

const er = (worth) =>  true : false;
;

So when the checkbox is checked, the tween will get an easeReverse worth. When it’s unchecked, easeReverse is about to false, letting us examine the earlier reverse habits with the brand new one.

We additionally rebuild the timeline every time the checkbox modifications, so every tween is created with the proper reverse easing from the beginning:

const rebuildMenuTimeline = ({ progress = 0, reverseEase = FULL_CLOSE_EASE_REVERSE } = {}) => {
  const safeProgress = clamp(progress, 0, 1);

  if (menuTimeline) {
    menuTimeline.revert();
  }

  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);
  menuTimeline.progress(safeProgress).pause();
};

You’ll additionally see a “interrupt velocity” management within the demo. If you happen to click on the toggle once more earlier than the opening animation has completed, the timeline reverses instantly. The slider controls that reverse velocity utilizing timeScale():

menuTimeline.timeScale(interruptReverseTimeScale).reverse();

This makes it simpler to check two issues individually: the velocity of the reverse movement, and the easing curve used whereas reversing.

easeReverse is basically helpful as a result of ahead and backward motions can now every have their very own character, with no need two totally separate animations.

We’d like to see how you utilize it in your individual interactions. If you happen to experiment with easeReverse, share it with us on X or LinkedIn (tag GSAP and Codrops).

Hope you take pleasure in this little demonstration of it!

Discover out extra about it within the GSAP docs.