Kromah Posted December 10, 2020 Share Posted December 10, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2020 Share Posted December 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 10, 2020 Solution Share Posted December 10, 2020 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. 👍 3 Link to comment Share on other sites More sharing options...
Kromah Posted December 10, 2020 Author Share Posted December 10, 2020 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 😃 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