├── .babelrc
├── .gitignore
├── .npmignore
├── README.MD
├── package.json
└── src
    ├── animate.jsx
    └── transition.jsx


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "react",
 4 |     "es2015"
 5 |   ],
 6 |   "plugins": [
 7 |     "transform-object-rest-spread",
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .gitignore
2 | .babelrc
3 | src
4 | 


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
 1 | ##Animate
 2 | 
 3 | ###Install
 4 | 
 5 | ```js
 6 | npm install @kimmel/animate --save
 7 | ```
 8 | 
 9 | ###Motivation
10 | 
11 | We needed a way to easily fade in components when they are added to the page. Most animation libraries seemed to do way too much and were complicated.
12 | The way it works is simple. It sets `transition: all 1000ms ease-in-out` by default, which can be changed. Extra CSS is applied with the `start` and `end` props (see props below).
13 | You can transition scale, opacity, whatever else you want.
14 | 
15 | ###Example
16 | 
17 | ```js
18 | import Animate from '@kimmel/animate'
19 | 
20 | <Animate start={{opacity: 0}} end={{opacity: 1}}>
21 |   {this.state.items.map((item, index) => <Test key={index} size={3} {...item} />)}
22 | </Animate>
23 | ```
24 | 
25 | ###Props
26 | 
27 | - `start`: css that will be applied when the component first mounts
28 | - `end`: css applied shortly after mounting
29 | - `speed`: transition speed in milliseconds
30 | - `transition`: The [transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property) you want to target
31 | 
32 | 
33 | ###Problems
34 | 
35 | You can't trigger animations on hover or anything like that. It'll probably be added later when we need it. We're open to pull requests though :)
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@kimmel/animate",
 3 |   "version": "0.0.2",
 4 |   "description": "animate children elements on creation",
 5 |   "main": "lib/animate.js",
 6 |   "scripts": {
 7 |     "build": "babel src --out-dir lib"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/NavJobs/animate.git"
12 |   },
13 |   "keywords": [
14 |     "animate",
15 |     "react",
16 |     "react-component",
17 |     "component",
18 |     "css",
19 |     "transition"
20 |   ],
21 |   "author": "Zach Silveira",
22 |   "license": "ISC",
23 |   "bugs": {
24 |     "url": "https://github.com/NavJobs/animate/issues"
25 |   },
26 |   "homepage": "https://github.com/NavJobs/animate#readme",
27 |   "devDependencies": {
28 |     "babel-plugin-transform-object-rest-spread": "^6.3.13",
29 |     "babel-preset-es2015": "^6.3.13",
30 |     "babel-preset-react": "^6.3.13"
31 |   },
32 |   "peerDependencies": {
33 |     "react": "^0.14.5"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/animate.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Transition from './transition'
 3 | 
 4 | export default class Animate extends React.Component{
 5 |   render(){
 6 |     let { children, ...otherProps } = this.props
 7 |     return (
 8 |       <div>
 9 |       {React.Children.map(children, child => <Transition {...otherProps}>{child}</Transition>)}
10 |       </div>
11 |     )
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/transition.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default class Transition extends React.Component{
 4 |   constructor(props){
 5 |     super(props)
 6 |     this.state = props.start
 7 |   }
 8 | 
 9 |   componentDidMount(){
10 |     setTimeout(() => this.setState(this.props.end), 50)
11 |   }
12 | 
13 |   render(){
14 |     let style = {
15 |       transition: `${this.props.transition || 'all'} ${this.props.speed || 1000}ms ease-in-out`,
16 |       ...this.state
17 |     }
18 |     return <div style={style}>{this.props.children}</div>
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------