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:

$ npm install

To run the project execute:

$ 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.