search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.8k stars 192 forks source link

Include Penner Easing equations in easing.css #526

Open gordonbrander opened 3 days ago

gordonbrander commented 3 days ago

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

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 commented 9 hours ago

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