Is there any way that customease can be converted to the cubic-bezier for css?

[david1977]

Is there any way that customease can be converted to the cubic-bezier() for css?

tks.

See the Pen xxQYPmE by rfrkk (@rfrkk) on CodePen

[Rodrigo]

Hi,

 

As far as I know no. Keep in mind that by design a cubic bezier curve consists on two points and a control point for each point as you can see here:

https://www.cssportal.com/css-cubic-bezier-generator/

 

While custom ease allows you to go completely crazy in terms of your easing functions!

 

Is worth mentioning that I have zero experience with CSS easing beyond the basics, since I've been using GSAP for over 10 years, so there could be a way that I'm not aware of.

 

Happy Tweening!

[GreenSock]

To clarify, you're asking to go from GSAP's CustomeEase to CSS (not the other way around), right? So you're in the GSAP forums asking how to stop using GSAP?

 

Like Rodrigo said, CSS cubic-bezier only allows two control points total whereas GSAP's CustomEase has zero limitations. So technically if you created a GSAP CustomEase with only two handles, you could convert that to CSS. Otherwise, it's impossible due to CSS limitations. 

[david1977]

My programming level is not good, it is easier to use css with simple js syntax to me.

Of course, I am also learning gsap and I look forward to applying it in the future.

 

I also encounter this kind of problem, but not with css.

See the Pen xxQYPmE?editors=1000 by rfrkk (@rfrkk) on CodePen

 

 

[mvaneijgen]

That is because you create a new tween each time you move in and out of the trigger. GSAP allows you to control a tween with simple functions like .play() .pause() .reverse() .restart(), ect. Check out these amazing starter guides to help you get a better grasp of the tools 

 

 

 

 

And hear your pen with that logic applied. Hope it helps and happy tweening! 

See the Pen abQQXye?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[rynokins]

Hey all, just wanted to chime in and let you know there is a way now, thanks to this article over on the Chrome for Devs site. Specifically, using this tool referenced in the article and choosing the SVG option under 'Format', then pasting in the SVG path value that CustomEase uses.

 

I made a minimal demo to show it in action, compared to CustomEase:

See the Pen oNrMeJo by rynokins (@rynokins) on CodePen

 

(note: I had to make sure to turn off CodePen's 'format on save' because the CSS formatter was breaking the `linear()` equation)

[Rodrigo]

Hi @rynokins

 

Thanks for sharing your findings with the community, I'm sure many users will find this very helpful 💚