Jump to content
GreenSock

MSCAU

Which GSAP ease best matches CSS's "transition-timing-function: ease"

Go to solution Solved by OSUblake,

Recommended Posts

I have foreground and background elements animating together for 2 seconds. To keep the code simple I am only using GSAP to animate the (more complex) background elements while using CSS transitions for the foreground elements.

 

Does anyone know which GSAP ease best matches the default CSS transition function of "transition-timing-function: ease"?

I note that this page mentions that it is equivalent cubic-bezier(0.25,0.1,0.25,1), whatever that means: 

https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

 

I see that it's not quite in sync with GSAP's "power1.out".

Link to comment
Share on other sites

Pro tip: as long as you've got CustomEase loaded, you can actually just do this: 

ease: "0.25,0.1,0.25,1"

But I'd still recommend doing it sorta like Blake did simply because I obsess about performance and if you create the ease up front and re-use it, that's more efficient: 

See the Pen poWqzvY?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks, both! Works very nicely.

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.
×