321dev Posted June 2, 2021 Share Posted June 2, 2021 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? Link to comment Share on other sites More sharing options...
Solution OSUblake Posted June 2, 2021 Solution Share Posted June 2, 2021 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 3 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now