For precision programmatic animation!
Translated from the JavaScript in Sean Yen’s Easing equations
Illustrations adapted from Andrey Sitnik and Ivan Solovev’s Easings.net
Example usage:
duration = 30
/** | |
* Easing functions | |
* | |
* https://gist.github.com/gre/1650294 | |
* http://easings.net | |
*/ | |
// no easing, no acceleration | |
export function easeLinear(t){ return t } | |
// accelerating from zero velocity | |
export function easeInQuad(t){ return t*t } |
For precision programmatic animation!
Translated from the JavaScript in Sean Yen’s Easing equations
Illustrations adapted from Andrey Sitnik and Ivan Solovev’s Easings.net
Example usage:
duration = 30
Name | Has hover | Has active hover | Note | |
---|---|---|---|---|
App launcher | X | – | ❗️All items are active – should be neutral | |
Breadcrumbs | X | X | ❗️Missing active | |
Drawer | X | X | Needs active-hover and active-pressed | |
Sidebar | X | X | Removing pressed in the tokens | |
Link | X | – |