css-in-js-animation-lab
An exploration on how to animate state transitions in React with different CSS-in-JS frameworks
Stars
0
Ecosystems:
JavaScript
CSS in JS Animations
This is an exploration how CSS transitions, keyframe animations and react-transition-group works with a CSS-in-JS library like Emotion compared to a "vanilla CSS" implementation.
Sample application
The sample application is a todo list that animates adding, removing, modifying and reordering items.
The application state logic can be found in the shared package and is re-used
across all UI implementations.
yarn
Try it out
- Clone this repo
- Run
yarn - Build the shared code
yarn workspace shared build
Vanilla example
Just using regular CSS classes in this example as a benchmark.
yarn workspace vanilla start
Emotion example
This example uses the Emotion CSS-in-JS framework.
yarn workspace emotion start