segmentio / ui-box

Blazing Fast React UI Primitive
MIT License
1.07k stars 54 forks source link

Implement keyframes function and add animation prop support #122

Closed brandongregoryscott closed 1 year ago

brandongregoryscott commented 1 year ago

This PR implements the ability to generate keyframe styles that are injected into the stylesheet and adds support for animation-related props. This backfills the last bit of functionality so we can migrate Evergreen off glamor! The API is very similar to the current glamor function. (see example in Toast.js)

Results from the master branch 3,696 ops/sec ±3.74% (54 runs sampled) 3,702 ops/sec ±4.95% (54 runs sampled) 3,662 ops/sec ±4.45% (55 runs sampled) 3,794 ops/sec ±4.02% (54 runs sampled) 3,845 ops/sec ±4.43% (54 runs sampled) 3,711 ops/sec ±4.30% (53 runs sampled) 3,841 ops/sec ±4.08% (54 runs sampled) 3,696 ops/sec ±4.06% (55 runs sampled) 3,776 ops/sec ±3.95% (56 runs sampled) 3,716 ops/sec ±3.95% (56 runs sampled) 3743.9 ops/sec avg
Results from the add-keyframes branch 3,651 ops/sec ±4.61% (52 runs sampled) 3,679 ops/sec ±4.54% (52 runs sampled) 3,633 ops/sec ±4.02% (55 runs sampled) 3,703 ops/sec ±3.91% (55 runs sampled) 3,709 ops/sec ±3.75% (55 runs sampled) 3,612 ops/sec ±4.19% (56 runs sampled) 3,666 ops/sec ±3.91% (55 runs sampled) 3,605 ops/sec ±7.42% (52 runs sampled) 3,655 ops/sec ±3.87% (55 runs sampled) 3,660 ops/sec ±4.04% (55 runs sampled) 3657.3 ops/sec

Demo of the keyframes and animation functionality via Storybook: ezgif com-gif-maker (1)

ezgif com-gif-maker (2)