Jump to content

# interpolate()

### Returns : *

Returns a number interpolated between the given values given a percent. Returns a function that returns interpolated numbers if no value (third parameter) is given.

Linearly interpolates between two values or a single array given the provided progress (between 0 and 1 where 0.5 is halfway between). If you don’t provide a `progress` to interpolate (the second parameter if you give it an array as the first parameter, the third parameter if you provide two non-array arguments as the first two arguments), it’ll return a `function` that’s ready to perform the interpolation accordingly.

``//interpolate halfway between 0 and 500``let num = gsap.utils.interpolate(0, 500, 0.5); //250``//if we don't provide a progress value, it'll return a function that's ready to perform the interpolation when fed a progress value``let interpolator = gsap.utils.interpolate(0, 500); // <- function!``//now we can feed in a progress value to the function we got in the line above and it'll return the interpolated number:``let num = interpolator(0.5); //250``

You can `interpolate()` pretty much anything - two strings, two objects with multiple properties, etc. For example:

``//numbers``let interp = gsap.utils.interpolate(0, 100);``interp(0.5); // 50``//strings``let interp = gsap.utils.interpolate("20px", "40px");``interp(0.5); // 30px``//colors``let interp = gsap.utils.interpolate("red", "blue");``interp(0.5); // rgba(128,0,128,1)``//objects``let interp = gsap.utils.interpolate({a:0, b:10, c:"red"}, {a:100, b:20, c:"blue"});``interp(0.5); // {a: 50, b: 15, c: "rgba(128,0,128,1)"}``//or even an array of any of the above!``let interp = gsap.utils.interpolate(["red", "green", "blue"]);``interp(0.5); // "green"``interp(0.4); // "rgba(51,102,0,1)"``
Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×