https://github.com/vincentriemer/native-css-layout-animation-poc
https://github.com/vincentriemer/native-css-layout-animation-poc
css layout-animation poc react resize-observer
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vincentriemer/native-css-layout-animation-poc
- Owner: vincentriemer
- License: mit
- Created: 2017-09-22T12:07:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-25T22:38:38.000Z (over 7 years ago)
- Last Synced: 2025-03-26T05:41:41.357Z (2 months ago)
- Topics: css, layout-animation, poc, react, resize-observer
- Language: JavaScript
- Homepage: https://layoutanim.vincentriemer.com/
- Size: 90.8 KB
- Stars: 33
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Native CSS Layout Animation POC
A proof of concept implementation and demo of a layout animation system which utilizes native CSS layout and special React elements. This project was initially discussed and released at React Boston 2017.
## Caveats
* Currently, the only browser to support the required `ResizeObserver` API is Chrome Canary with the *experimental web apis* flag turned on.
* This PoC is leveraging behavior (firing events on position change) that is found in the Chrome Canary implementation of `ResizeObserver` but not its corresponding spec so there is a chance that this behavior will eventually be removed and break this demo.
* This implementation only is focused on the **change** of layout on existing elements at a single level. No work has been done yet on facilitating layout animations of mount, unmount, or elements with visible children.
## Getting Started
Clone the repository and navigate to the root directory of the project and install the dependencies like so:
```bash
$ npm install
```
To run the project execute:
```bash
$ npm run start
```
and navigate to `localhost:3000` in Chrome Canary to try out the demo.
### Note
This project was bootstrapped with `create-react-app` so all npm scripts that are generated by it will also work here.