react-cube-image-reveal

Installing

$ npm install react-cube-image-reveal --save

Demos

Usage

<CubeImageReveal
  image={image}
  width={width}
  height={height}
  piecesPerWidth={piecesPerWidth}
  animationType={animationType}
/>

Property	Type	Default	Description
image*	string		Image url to animate.
width*	number		Image width. This is required for this animation to work.
height*	number		Image height. This is required for this animation to work.
piecesPerWidth*	number		This defines how many pieces the width should be divided into. Setting this too high will impact the performance of the animation so use this carefully.
springConfig	shape { stiffness: number precision: number damping: number }	presets.noWobble	React motion configurations. More about this here
animationType	enum ('simpleFadeIn', 'fadeInFromCenter', 'fadeInToBottomRightEdge', 'rotateToBottomRightEdge', 'rotateFromCenter', 'rotateTopToBottom')	'fadeInFromCenter'	Type of animation to use.
inverseAnimation	bool	true	Setting this to true will reverse the image animation.
customAnimator	shape { applyAnimation: func applyAnimationInitialization: func applyInverseAnimation: func getWrapper: func }		Use this if you want to apply your own animation. Take a look at our animations to learn more from here

Contributing

To contribute, follow these steps:

• Fork this repo.
• Clone your fork.
• Run npm install
• Run npm start
• Goto localhost:3000
• Add your patch then push to your fork and submit a pull request

License

MIT