GSAP with shader values

[macl 2 Likes (Newbie)]

Hi there,

I want to use GSAP to sync animations with WebGL shaders and dom elements. In order to do so I would like to use easing equations to interpolate long floats between -1 to 1.0000 (for example)

I have seen some examples using utils/interpolate to do simple lerps such as: 

 

 

however this does not address the question of easing functions (beyond lerps, perhaps even custom easing), as well as pause/resume/cancel/update and all the other good stuff you expect from GSAP. Is there a way to get all of this animation ability but simply when the target endpoint is a Float ? 

 

Thanks very much

 

[OSUblake 18,476 Likes (Superhero)]

Welcome to the forums @macl

 

That's all possible, but you can't target a number itself. You can animate any object, for example, in some WebGl libraries you would animate the object that has the uniforms on it.

 

gsap.to(myObject.uniforms, {
  someProperty: 1,
  ease: "bounce"
});

 

But it's hard to answer what you should target without seeing some code. 

 

[macl 2 Likes (Newbie)]

Quote

But it's hard to answer what you should target without seeing some code. 

you nailed it first time this is perfect