Card Flip Animation In React

A smooth card component with flip animation implement in React Motion.


# Yarn
$ yarn add react-flop-card

$ npm install react-flop-card --save


  flipped={ true } onClick={ onClick }
  onMouseOut={ onMouseOut } onMouseOver={ onMouseOver }
  frontChild={ frontChild } backChild={ backChild }
  width={ 100 } height={ 100 }
  style={ { front, back, wrapper } }/>

Default props.

Style: PropTypes.shape({
  front: PropTypes.object,
  back: PropTypes.object,
  wrapper: PropTypes.wrapper
frontChild: PropTypes.element,
backChild: PropTypes.element,
width: PropTypes.oneOf(PropTypes.number, PropTypes.string),
height: PropTypes.oneOf(PropTypes.number, PropTypes.string),
degree: PropTypes.number,
onClick: PropTypes.func,
onMouseOut: PropTypes.func,
onMouseOver: PropTypes.func


Card Flip Animation In React

Download Details:

Author: pckhoi

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT


Add Comment