Addon component wrappers for common UI transitions.
npm install 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.
yarn add react-motion-ui-pack
npm install react-motion-ui-pack --save
``htmlTransition
(UMD library exposed as )`
`js
import Transition from 'react-motion-ui-pack'
// Animate a list of items as they are added
enter={{
opacity: 1,
}}
leave={{
opacity: 0,
}}
>
{ this.state.items.map(item =>
// Animate a modal
enter={{
opacity: 1,
translateY: spring(0, {stiffness: 400, damping: 10})
}}
leave={{
opacity: 0,
translateY: 250
}}
>
{ this.state.modalOpen &&
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.boolDetermines whether the animation runs on mount or not
####
appear: PropTypes.objectWhere the animation starts, defaults to leave value if nothing passed
####
enter: PropTypes.objectThe resting state of the animation
####
leave: PropTypes.objectThe ending value of the animation
####
onEnter: PropTypes.funcCallback right before an element enters, passes in your current animating values
onEnter={currentValues => / do something /} called only once.####
onLeave: PropTypes.funcSame as
onEnter, but fires multiple times as an element is leaving.FAQ
#### How
appear, enter, & leave workThese values are automatically wrapped in a React Motion
spring to keep the API simple. If you need a custom config you can pass your own spring e.g. spring(22, { stiffness: 30, damping: 300 }).#### My animation values aren't being applied to any elements
If you decide to use a custom component as a child,
style and dimensions props will be passed into that component for you to use however you want. If you pass a regular React DOM element, will take care of applying the values for you by cloning your element and passing it in.Running Locally
clone repo
git clone git@github.com:souporserious/react-motion-ui-pack.gitmove into folder
cd ~/react-motion-ui-packinstall dependencies
npm installrun dev mode
npm run devopen your browser and visit:
http://localhost:8080/`