Chapter 166: Find the Linear Progress Where an Ease Hits a Value (Helper)

Core Idea

A helper that inverts an ease function: given a target eased output ratio (like 0.7), it numerically solves for the linear progress (0-1) that produces it, useful for syncing other logic to a specific point in an eased animation.

Key Concepts

• Uses iterative approximation (a simple secant-like search) rather than an analytical inverse, since most eases aren't easily invertible in closed form.
• Accepts a precision parameter (default 0.0001) to control how close the approximation must get.
• Practical use: figure out, for a value tweening from A to B with a given ease, at what normalized progress it crosses a specific target value.

Code Examples

function easeToLinear(ease, ratio, precision = 0.0001) {
  ease = gsap.parseEase(ease);
  let t = 0, dif = ratio - ease(t), inc = dif / 2, newDif;
  while (Math.abs(dif) > precision) {
    newDif = ratio - ease((t += inc));
    newDif < 0 !== inc < 0 && (inc *= Math.max(-0.5, newDif / dif));
    dif = newDif;
  }
  return t + ((ratio - ease(t + inc)) / dif) * -inc;
}

// where does a 100->500 tween eased with "power2.out" cross 250?
let progress = easeToLinear("power2", (250 - 100) / (500 - 100), 0.00001);

• What it demonstrates: converting a target output value into the linear progress ratio that produces it under a given ease.

Key Takeaways

1. Useful for triggering side-effects (sound, DOM changes) precisely when an eased value crosses a threshold.

Connects To

• CustomEase, gsap.parseEase(): this helper works with any ease resolvable via parseEase.