react-motion-ui-pack

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.

$3

yarn add react-motion-ui-pack

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

``html

(UMD library exposed as Transition)
`

$3

`js

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

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


#### 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.

FAQ

#### How appear, enter, & leave work

These 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.git

move into folder

cd ~/react-motion-ui-pack

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/`