Magical effects for react components Inspired by magic.
npm install --save react-magic-effects
EffectContainer.propTypes = {
effect: React.PropTypes.func, // some default effects are available from `Effects`
duration: React.PropTypes.number, //second
loop: React.PropTypes.bool, // animation will be looped after 60 frame * duration
autoPlay: React.PropTypes.bool // animation will be started after `componentDidMount` and `componentDidUpdate`,
onAnimationEnd: React.PropTypes.func // called when animation end
};
These effects is available from Effects
.
- magic
- twisterInDown
- twisterInUp
- swap
- puffIn
- puffOut
- vanishIn
- vanishOut
- openDownLeft
- openDownLeftRetourn
- openDownRight
- openDownRightRetourn
- openUpLeft
- openUpLeftRetourn
- openUpRight
- openUpRightRetourn
- openDownLeftOut
- openDownRightOut
- openUpLeftOut
- openUpRightOut
- perspectiveDown
- perspectiveDownRetourn
- perspectiveLeft
- perspectiveLeftRetourn
- perspectiveRight
- perspectiveRightRetourn
- perspectiveUp
- perspectiveUpRetourn
- rotateDown
- rotateLeft
- rotateRight
- rotateUp
- slideDown
- slideDownRetourn
- slideLeft
- slideLeftRetourn
- slideRight
- slideRightRetourn
- slideUp
- slideUpRetourn
- swashIn
- swashOut
- foolishIn
- foolishOut
- holeOut
- tinDownIn
- tinDownOut
- tinLeftIn
- tinLeftOut
- tinRightIn
- tinRightOut
- tinUpIn
- tinUpOut
- bombLeftOut
- bombRightOut
- boingInUp
- boingOutDown
- spaceInDown
- spaceInLeft
- spaceInRight
- spaceInUp
- spaceOutDown
- spaceOutLeft
- spaceOutRight
- spaceOutUp
- scaleIn
- scaleOut
You can apply your custom effect by using your own function.
-
effect(progress) => {}
:progress
will be passed as number(0 to 100).return object should be in css format (Not React JSX style).
let myEffect = (progress) => { let transform = `scale(${Effects.utils.one2Zero(progress)}, ${Effects.utils.one2Zero(progress)})`; return { '-webkit-transform': transform, 'transform': transform }; }
play
Start animation.
handlePlayButtonClick(){
this.refs.myAnimationContainer.play();
}
-
stop
Stop animation.
handlePauseButtonClick(){ this.refs.myAnimationContainer.stop(); }
-
reset
Reset animation.
onAnimationEnd(){ this.refs.myAnimationContainer.reset(); }
import EffectContainer, {Effects} from 'react-magic-effects';
<EffectContainer ref='myAnimationContainer' effect={Effects.magic}>
<YourComponent>
</EffectContainer>
See example
npm install
npm run start:example
npm test