https://github.com/aitoroses/react-animation-engine
Extract famo.us transitionable capabilities in 14kb for react. Mixin to transition between state values.
https://github.com/aitoroses/react-animation-engine
Last synced: about 2 months ago
JSON representation
Extract famo.us transitionable capabilities in 14kb for react. Mixin to transition between state values.
- Host: GitHub
- URL: https://github.com/aitoroses/react-animation-engine
- Owner: aitoroses
- Created: 2015-04-23T07:23:52.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-04-26T13:34:31.000Z (about 11 years ago)
- Last Synced: 2025-02-10T19:51:57.191Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 508 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-animation-engine
Extract famous transitionable capabilities in 10kb. Mixin to transition between state values.
# Install
```
npm install react-animation-engine
```
# Usage
```jsx
import {TransitionableMixin, Easing} from 'react-animation-engine';
var TestComponent = React.createClass({
/**
* Define transitionable properties
*/
mixins: [TransitionableMixin(["width", "height"])],
/**
* Return initial values for the transitionables
*/
getInitialState() {
return {
width: 200,
height: 50
}
},
/**
* Animate using Easing functions
*/
handleButtonClick() {
this.width = {
value: document.body.clientWidth / 2,
duration: 5000
};
this.height = {
value: document.body.clientHeight / 2,
duration: 2000,
curve: Easing.outCirc
};
},
/**
* Animate using Springs
*/
handleClick() {
// Halt the ongoing animation
this.handleStop();
// Toggle the status
var toggle = !!this.state.toggle;
// Animate
this.width = {
value: toggle ? 400: 100,
method: "spring",
dampingRatio: 0.2,
period: 1000
};
this.height = {
value: toggle ? 300: 200,
method: "spring",
dampingRatio: 0.2,
period: 500
};
// Store the state
this.setState({
toggle: !toggle
})
},
/**
* Handle transitionable stop
*/
handleStop() {
this.halt();
},
/**
* Render method
*/
render() {
return (
click me
Stop
)
}
});
/**
* Render component into body
*/
React.render(, document.body);
```