easings.net icon indicating copy to clipboard operation
easings.net copied to clipboard

The cubic-bezier() values here are fundamentally different than the original ones

Open tombigel opened this issue 1 year ago • 2 comments

After implementing some animations passed to us by our designers using the values from the named animations in easings.net we found some differences, after some investigations we discovered that the values we used from easings.net were not the same values used in places that uses the Penner math functions or the original cubic-bezier() values from http://robertpenner.com/easing/ and https://matthewlein.com/tools/ceaser

tombigel avatar Mar 20 '23 08:03 tombigel

Are you saying that there is a difference between JS and CSS easings?

Can you show an examples before/after?

ai avatar Mar 20 '23 09:03 ai

Ok, I did my research and I might be wrong 🙈 https://codepen.io/tombigel/pen/eYLLVRg?editors=1010

In my defense - The old school easing references (Caesar) have certain values, PostCss (which is linked to by easings.net) uses these values too)

But - the values in easings.net seems to be closer to the output of the math functions and to the GSAP implementation (which is my original reference)

tombigel avatar Mar 20 '23 15:03 tombigel