Download
React Flight is a JavaScript library for UIs built with React that allows you to compose animations and transitions via “flights” where you design a start component, an end component, and the tool handles animating between them. It’s pitched as the “best way to build animation compositions for React” and is inspired by tools such as Principle in the mobile design world. The developer experience emphasises framing: you place elements into Flight.Frame containers, specify key-frames (start and end states), and then trigger animations via APIs (play(), reset()). It supports interactive previewing of frames (via showFrames mode), and integrates (at least at the time) with jQuery/Velocity under the hood (though future versions may remove the jQuery dependency). It’s well-suited for teams creating rich UI transitions, micro-animations and interactive components in React applications.
Features
- Declarative animation composition via <Flight> and <Flight.Frame> elements
- Interactive mode to preview and refine key-frames (showFrames, interactive)
- Programmatic API to control animations (methods like play(), reset())
- Integration with React component tree and support for Redux store context
- Uses a DOM-adapter (Velocity.js) with potential to swap animation engines
- Example gallery and scaffolded workflows to kick-start animation-driven UIs
Project Samples
