- Notifications
You must be signed in to change notification settings - Fork1
kimmelsg/cj-animate
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
##Animate
###Install
npminstall @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 setstransition: all 1000ms ease-in-out by default, which can be changed. Extra CSS is applied with thestart andend props (see props below).You can transition scale, opacity, whatever else you want.
###Example
importAnimatefrom'@kimmel/animate'<Animatestart={{opacity:0}}end={{opacity:1}}>{this.state.items.map((item,index)=><Testkey={index}size={3}{...item}/>)}</Animate>
###Props
start: css that will be applied when the component first mountsend: css applied shortly after mountingspeed: transition speed in millisecondstransition: Thetransition 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 :)