Chapter 112: Tween.ratio

Core Idea

ratio (read-only) is the tween's progress after being run through its ease, which can exceed the 0-1 range for eases like "back" or "elastic".

Key Concepts

• Different from progress(): progress() is linear playhead position (0-1); ratio is what that position becomes after the ease function transforms it.
• ratio === easeFunc(progress()) at any given moment.

Code Examples

const tween = gsap.to({ foo: 0 }, { foo: 10, duration: 1, ease: "power2.out" });
tween.pause(0.5);
console.log(tween.progress()); // 0.5
console.log(tween.ratio); // 0.875 (already eased)

• What it demonstrates: at the linear halfway point, the eased ratio is already 87.5% of the way there because of the "power2.out" ease curve.

Key Takeaways

1. Useful as a multiplier for custom interpolation logic inside onUpdate, when you need the post-ease value rather than raw linear progress.

Connects To

• Tween.progress(): the pre-ease, linear equivalent.