React Motion UI Pack

React Motion is an amazing animation library for React. React Motion UI Pack tries to help ease entry level / common use cases with React Motion by providing a higher level way to work with it and create common UI transitions easier. If you need more complex animations I suggest using React Motion directly.

Usage

yarn add react-motion-ui-pack

npm install react-motion-ui-pack --save

<script src="https://unpkg.com/react-motion-ui-pack/dist/react-motion-ui-pack.js"></script>
(UMD library exposed as `Transition`)

##Example

import Transition from 'react-motion-ui-pack'

// Animate a list of items as they are added
<Transition
  component="ul"
  enter={{
    opacity: 1,
  }}
  leave={{
    opacity: 0,
  }}
>  
  { this.state.items.map(item =>
      <li key={item.id}>{item.content}</li>
    )
  }
</Transition>

// Animate a modal
<Transition
  component={false} // don't use a wrapping component
  enter={{
    opacity: 1,
    translateY: spring(0, {stiffness: 400, damping: 10})
  }}
  leave={{
    opacity: 0,
    translateY: 250
  }}
>
  { this.state.modalOpen &&
    <div key="modal" className="modal__content">
      // modal code
    </div>
  }
</Transition>

Props

component: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, isElement])

Define the wrapping tag/component around the children passed in, pass false to not use a wrapping component at all for only child components.

runOnMount: PropTypes.bool

Determines whether the animation runs on mount or not

appear: PropTypes.object

Where the animation starts, defaults to leave value if nothing passed

enter: PropTypes.object

The resting state of the animation

leave: PropTypes.object

The ending value of the animation

onEnter: PropTypes.func

Callback right before an element enters, passes in your current animating values onEnter={currentValues => /* do something */} called only once.

onLeave: PropTypes.func

Same as onEnter, but fires multiple times as an element is leaving.

GitHub