Chapter 163: Blend Two Eases (Helper)

Core Idea

A helper that combines two different eases into one — using one ease's shape near the start of the tween and gradually crossfading to a second ease's shape by the end, optionally controlled by a third "blender" ease.

Key Concepts

• Returns a new ease function; pass it directly as a tween's ease.
• The optional third parameter controls how the blend itself transitions (defaults to "power4.inOut").
• To invert a single ease (rather than blend two), a different helper/demo is needed — this one is specifically for combining two.

Code Examples

function blendEases(startEase, endEase, blender) {
  var parse = (ease) => (typeof ease === "function" ? ease : gsap.parseEase("power4.inOut")),
    s = gsap.parseEase(startEase), e = gsap.parseEase(endEase), blender = parse(blender);
  return (v) => {
    var b = blender(v);
    return s(v) * (1 - b) + e(v) * b;
  };
}

gsap.to("#target", { duration: 2, x: 100, ease: blendEases("back.in(1.2)", "bounce") });

• What it demonstrates: an element starts with a back.in overshoot and finishes with a bounce landing, blended smoothly across the tween.

Key Takeaways

1. Useful when neither a single built-in ease nor a CustomEase captures a "different character at start vs. end" motion.

Connects To

• CustomEase: an alternative when you need a fully custom single curve instead of blending two named eases.