Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

tombigel
Copy link

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

@ai
Copy link
Owner

ai commented Mar 20, 2023

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

Can you show an examples before/after?

@tombigel
Copy link
Author

tombigel commented Mar 20, 2023

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants