Package Exports
- resonance
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (resonance) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Resonance | Data-driven transitions in React
Animated state transitions that update with your data. This library uses d3-timer to efficiently manage thousands of state tweens. You can apply high-performance state animations using an approachable, easy to implement syntax. Get Started.
Installation
Resonance is available as an npm package.
npm install resonanceWhy would I need this?
Resonance handles much of the heavy lifting for...
- Creating expressive custom transitions easily
- Animating anything! HTML, SVG, React-Native components...
- Transitioning numbers, strings, colors, SVG transforms...
- Setting transition durations and delays
- Handling transition interrupts
- Hooks for transition events (start, interrupt, end)
- Custom tween functions
- Specifying ease functions
- Stopping transitions on component unmount
Run documentation/examples locally
To run the documentation/examples site in this repo locally:
- clone the repo and cd into the directory
- npm install && cd docs && npm install && npm start
- go to http://localhost:3000/
SVG Chart Examples
You can animate any component with Resonance, but it was developed by experimenting with animated SVG charts and redux. This library is great for creating abstact animated data visualizations in React. You can view the example code here for the chart examples. Each example is a mini redux application with its actions and reducers defined in a small module. You can run these examples locally by following the direction above.
