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

Include Penner Easing equations in easing.css #526

Open
gordonbrander opened this issue Nov 29, 2024 · 1 comment
Open

Include Penner Easing equations in easing.css #526

gordonbrander opened this issue Nov 29, 2024 · 1 comment
Labels

Comments

@gordonbrander
Copy link

Robert Penner's easing equations are a battle-tested set of Bézier curves for plush animations:

  • Quadratic
  • Cubic
  • Quartic
  • Quintic
  • Sine
  • Exponential
  • Circular

E.g. easeInOutSine easeOutExpo, etc.

These date back to the Flash days and make up a common default "kit" for easing (with the addition of springs).

Two CSS implementations:

@argyleink
Copy link
Owner

these were in the original set of easings for Open Props! they were leveraging this postcss plugin https://www.npmjs.com/package/postcss-easings

and i agree, these are battle tested and often the first set that folks get introduced to when exploring the potential curves… i just always found their names confusing as hell to remember while also never really loving the results. BUT, just because I dont love them, doesnt mean they shouldnt be a part of this CSS variables collection 👍🏻

+1 to adding them back so the collection is the classic "kit" plus moarrrr

@argyleink argyleink added the good first issue Good for newcomers label Dec 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants