How to have an easing equivalent to css ease-in-out

[justintime]

Hi,

 

I have an existing CSS transition that is set to ease-in-out to animate a specific element.

I am also using gsap to animate a second element, close to the first one. However, with the gsap easing, I am not able to have the 2 elements transition the same way.

If I want to keep the ease of use of the CSS transition on the first element but use the power of gsap on the second element and have easing the same on both, how do I do?

 

Thanks

 

[Rodrigo]

Hi @justintime and welcome to the GSAP Forums!

 

Maybe using this tool:

https://matthewlein.com/tools/ceaser

 

And comparing that with our Ease Visualizer you'll be able to find what's closer to that particular easing function:

https://gsap.com/docs/v3/Eases

 

The closest one seems to be power1.inOut, but you can also use our Custom Ease tool for that (you can check in the Ease Visualizer how to use it). You can add the Custom Ease tool super easy by following this installation instructions:
https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true&ease=CustomEase

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Example:

CustomEase.create("in-out", "0.42,0,0.58,1")

And then: 

gsap.to(".box", {
  ease: "in-out",
  ...
});

 

[justintime]

Thank you very much.

Did I miss it in the documentation? If it's not there, it would be perfect to know what the parameters are for the different stock css easings.

 

So, I tried, and even if better, it's not perfect.

Note that if I migrate my css transition to a gsap solution, then it becomes perfect.

So there is something between the 2 worlds that seem difficult to ... "synchronize"?

 

[GreenSock]

9 hours ago, justintime said:

Did I miss it in the documentation? If it's not there, it would be perfect to know what the parameters are for the different stock css easings.

No, those values were just taken from the tool that @Rodrigo pointed you to previously. I have no idea where Matthew got those numbers. They're likely an approximation. 

 

Your goal is to create a GSAP animation that eases in EXACTLY the same way as a CSS animation? Why? That seems very strange to me. If your goal is to have them perfectly synchronized, I don't think that's even possible to do because of the way browsers work. Why would you not just use GSAP? It gives you much, much more power and flexibility that CSS. 🤷‍♂️

[justintime]

My motivation is mainly pragmatic. I have existing code that works very well with CSS and I'm in the process of adding gsap for complex animations. The time I have and my priorities mean that if I can keep existing code without having to migrate it, that's always better. But I agree that gsap is much more powerful.

[Cassie]

It's pretty similar in this test.

See the Pen PogVJNe by GreenSock (@GreenSock) on CodePen

[GreenSock]

Yeah, I would never expect CSS and JS animations to remain synchronized. They use completely different timing mechanisms and threads. GSAP has lag smoothing too, but CSS wouldn't match that. In short, if you're trying to build something such that CSS and JS animations are 100% perfectly synchronized, I'd give up immediately and adjust your strategy. Obviously I'd recommend just using GSAP because you'll get way more flexibility overall and everything will remain synchronized. 

[justintime]

50 minutes ago, GreenSock said:

Obviously I'd recommend just using GSAP because you'll get way more flexibility overall and everything will remain synchronized. 

That was what I understood