react-magic-effects
Magical effects for react components Inspired by magic.
Demo
Installation
npm install --save react-magic-effects
API
EffectContainer
Props
EffectContainerpropTypes = effect: ReactPropTypesfunc // some default effects are available from `Effects` duration: ReactPropTypesnumber //second loop: ReactPropTypesbool // animation will be looped after 60 frame * duration autoPlay: ReactPropTypesbool // animation will be started after `componentDidMount` and `componentDidUpdate`, onAnimationEnd: ReactPropTypesfunc // called when animation end;
Available Effects
These effects is available from Effects
.
Magic effects
- magic
- twisterInDown
- twisterInUp
- swap
Bling
- puffIn
- puffOut
- vanishIn
- vanishOut
Static Effects
- openDownLeft
- openDownLeftRetourn
- openDownRight
- openDownRightRetourn
- openUpLeft
- openUpLeftRetourn
- openUpRight
- openUpRightRetourn
Static Effects Out
- openDownLeftOut
- openDownRightOut
- openUpLeftOut
- openUpRightOut
Perspective
- perspectiveDown
- perspectiveDownRetourn
- perspectiveLeft
- perspectiveLeftRetourn
- perspectiveRight
- perspectiveRightRetourn
- perspectiveUp
- perspectiveUpRetourn
Rotate
- rotateDown
- rotateLeft
- rotateRight
- rotateUp
Slide
- slideDown
- slideDownRetourn
- slideLeft
- slideLeftRetourn
- slideRight
- slideRightRetourn
- slideUp
- slideUpRetourn
Math
- swashIn
- swashOut
- foolishIn
- foolishOut
- holeOut
Tin
- tinDownIn
- tinDownOut
- tinLeftIn
- tinLeftOut
- tinRightIn
- tinRightOut
- tinUpIn
- tinUpOut
Bomb
- bombLeftOut
- bombRightOut
Boing
- boingInUp
- boingOutDown
On the Space
- spaceInDown
- spaceInLeft
- spaceInRight
- spaceInUp
- spaceOutDown
- spaceOutLeft
- spaceOutRight
- spaceOutUp
Scale
- scaleIn
- scaleOut
Custom Effect
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 }; }
Component API
play
Start animation.
handlePlayButtonClick(){
this.refs.myAnimationContainer.play();
}
-
stop
Stop animation.
handlePauseButtonClick(){ this.refs.myAnimationContainer.stop(); }
-
reset
Reset animation.
onAnimationEnd(){ this.refs.myAnimationContainer.reset(); }
Usage example
; <EffectContainer ref='myAnimationContainer' effect=Effectsmagic> <YourComponent></EffectContainer>
See example
npm installnpm run start:example
Tests
npm test