Capítulo 159 de 411

Chapter 159: Weighted Eases (Helper)

Core Idea

A helper that patches GSAP's standard (non-configurable) eases so they accept an optional weight ratio between -1 and 1, pulling the curve toward the "in" or "out" portion without needing a full CustomEase.

Key Concepts

  • Run addWeightedEases() once at startup; it adds a .config() to every standard ease that doesn't already have one.
  • After that, any standard ease accepts a parenthesized ratio: -1 weights fully toward "in", 1 fully toward "out", 0 is unweighted.
  • Doesn't apply to eases that already have their own configuration syntax (e.g. steps(), slow()).

Code Examples

function addWeightedEases() {
  let eases = gsap.parseEase(),
    createConfig = (ease) => (ratio) => {
      let y = 0.5 + ratio / 2;
      return (p) => ease(2 * (1 - p) * p * y + p * p);
    };
  for (let p in eases) {
    if (!eases[p].config) eases[p].config = createConfig(eases[p]);
  }
}

// usage after calling addWeightedEases() once:
gsap.to(el, { x: 200, ease: "power2.inOut(0.5)" }); // weighted toward "out"
  • What it demonstrates: turning any standard ease into a weighted variant via a string parameter.

Key Takeaways

  1. Cheaper than CustomEase when you only need to nudge an existing ease's balance, not draw a whole new curve.
  2. Must be called once before any weighted-ease syntax is used elsewhere.

Connects To

  • CustomEase: for arbitrary curves beyond what weighting standard eases can achieve.