non-linear gsap.interpolate

[321dev]

I'm using gsap.interpolate to perform some kind of keyframe-animation.

But gsap.interpolate interpolates linearly between the values, based on their position in the array. E.g:

gsap.utils.interpolate([0, 50, 100], 0.5);  // 50

 

I'd like to place the keyframes at specific positions, e.g. i want to map:

0 -> 0

0.3 -> 50

1 -> 100

 

Is there an easy way to achieve this?

[OSUblake]

Hi, you can use keyframes like this. Just use the duration for what the percentage should be.

 

const obj = {
  value: 0
};

const interp = gsap.to(obj, {
  paused: true,
  ease: "none",
  keyframes: [
    { value: 50, duration: 0.3 },
    { value: 100, duration: 0.7 }
  ]
});

interp.progress(0.3);
console.log(obj.value); // 50