Chapter 137: gsap.utils.interpolate()

Core Idea

interpolate() linearly blends between two values of almost any matching type (numbers, colors, strings, arrays, complex strings, objects) given a 0-1 progress value.

Reference Tables

Signature	Description
interpolate(start, end, progress)	returns the interpolated value immediately
interpolate(start, end)	returns a reusable function taking progress later

Colors return in rgba()/hsla() format.

Code Examples

gsap.utils.interpolate(0, 500, 0.5); // 250
gsap.utils.interpolate("20px", "40px", 0.5); // "30px"
gsap.utils.interpolate("red", "blue", 0.5); // "rgba(128,0,128,1)"

Key Takeaways

1. Works across types that plain math can't (colors, complex strings with embedded numbers) — this is the general-purpose blending primitive behind much of GSAP's tweening.