https://github.com/kimmelsg/cj-animate
A React component that handles animating elements as they are created
https://github.com/kimmelsg/cj-animate
Last synced: 6 months ago
JSON representation
A React component that handles animating elements as they are created
- Host: GitHub
- URL: https://github.com/kimmelsg/cj-animate
- Owner: kimmelsg
- Created: 2016-01-05T16:02:50.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-01-05T16:25:55.000Z (over 9 years ago)
- Last Synced: 2024-11-09T23:38:17.607Z (6 months ago)
- Language: JavaScript
- Size: 1.95 KB
- Stars: 24
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
##Animate
###Install
```js
npm install @kimmel/animate --save
```
###Motivation
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.
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).
You can transition scale, opacity, whatever else you want.
###Example
```js
import Animate from '@kimmel/animate'
{this.state.items.map((item, index) => )}
```
###Props
- `start`: css that will be applied when the component first mounts
- `end`: css applied shortly after mounting
- `speed`: transition speed in milliseconds
- `transition`: The [transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property) you want to target
###Problems
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 :)