Get Bezier curve y-value for given x-value

[Kromah]

Hi,

I am building an application that does not require to play a tween animation.

 

Instead, all I need is to provide gsap with a custom bezier curve and ask it to return me what the y-value of this curve be for a given x-value.

 

Example: imagine a tween that would fade in a red light. Instead of playing the animation, only ask gsap "hey gsap, what would be the alpha value of my red light at t = 0.5sec?"

 

I've been scratching my head with this problem but I seem to lack some understanding to find my answer.

Thank you.

 

[ZachSaucier]

Hey Kromah and welcome to the GreenSock forums. 

 

You need more information that just a bezier curve to get a value at a certain amount of seconds. You also need a duration, the easing, and the start and end values. 

 

What would likely make sense is to create a tween for your alpha, use GSAP's .time() to set the time when you need to, then use GSAP's .getProperty to get the rendered value at that time. 

[GreenSock]

Yeah, we'd need to know more about exactly what you need but if you're literally wanting to map linear progress values (x) to the corresponding y position on a bezier curve (as seen in the Ease Visualizer), you may be able to just use a CustomEase because that's what it's made for. But you can't have any overlapping values on the x axis (like something that doubles-back on itself on the x axis). 

 

Otherwise, you could simply create a tween of a generic object that contains the property (or properties), then then set the progress() of that tween to whatever you want and read the value of that generic object. Easy-peasy. 👍

[Kromah]

Thank you ZachSaucier and Greensock for your responses.

What I needed was exactly what you said Greensock, mapping a single x to y value on a custom bezier curve. And indeed CustomEase was what I needed.

 

So this is how I will be mapping my values:

const myEase = CustomEase.create("myEase", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,-0.005 0.332,-0.005 0.332,-0.005 0.414,1 0.671,1 0.991,1 1,-0.005 1,-0.005");

const x = .5;

const y = myEase(x);

 

Many thanks again 😃