Jump to content

GreenSock Docs


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.

  1. //interpolate halfway between 0 and 500
  2. let num = gsap.utils.interpolate(0, 500, 0.5); //250
  3. //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
  4. let interpolator = gsap.utils.interpolate(0, 500); // <- function!
  5. //now we can feed in a progress value to the function we got in the line above and it'll return the interpolated number:
  6. let num = interpolator(0.5); //250

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

  1. //numbers
  2. let interp = gsap.utils.interpolate(0, 100);
  3. interp(0.5); // 50
  4. //strings
  5. let interp = gsap.utils.interpolate("20px", "40px");
  6. interp(0.5); // 30px
  7. //colors
  8. let interp = gsap.utils.interpolate("red", "blue");
  9. interp(0.5); // rgba(128,0,128,1)
  10. //objects
  11. let interp = gsap.utils.interpolate({a:0, b:10, c:"red"}, {a:100, b:20, c:"blue"});
  12. interp(0.5); // {a: 50, b: 15, c: "rgba(128,0,128,1)"}
  13. //or even an array of any of the above!
  14. let interp = gsap.utils.interpolate(["red", "green", "blue"]);
  15. interp(0.5); // "green"
  16. 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.