Jump to content
Search Community

GSAP with shader values

macl test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

 

Link to comment
Share on other sites

  • Solution

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. 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...