animation-chain/README.md

Animation Chain is a chaining library which utilizes the browser's `requestAnimationFrame` function in place of the usual `setTimeout`. This results in a much more accurate representation of time passed based on a delta time calculation. This can be usefu

# Animation Chain

Animation Chain is a chaining library which utilizes the browser's `requestAnimationFrame` function in place of the usual `setTimeout`. This results in a much more accurate representation of time passed based on a delta time calculation. This can be useful in timing class additions and removals based on CSS transition timings.

## Set Up ##
* Clone the repo
* Run `npm install` to install dependancies
* Run grunt to build the files into the `public/` dir

## Usage ##
`animation-chain` is invoked the same way that setTimeout is, with the `chainTo` function being added to easily integrate successive function calls. Like promises for certain amounts of time or events

```
setTimeout(function(){console.log('old')}, 500);
```
```
chain(function(){console.log('new')}, 500);
```

Here's a use case for a slightly longer timeout (useful in chaining animations through adding classes)

```
setTimeout(function() {
  el.classList.toggle("animation1");
  setTimeout(function() {
    el.classList.toggle("animation2");
  }, 500)
}, 500);
```
```
chain(function() {
  el.classList.toggle("animation1");
}, 500).chainTo(function() {
  el.classList.toggle("animation2");
}, 500);
```

All while being more performant based on animation frame usage

You can also tap into the transition and animation events like so

```
var chainObject = {
  selector: '.animating-el',
  callback: function() {
    console.log('animation-ended')
  },
  animationType: 'transition'
}

chain(chainObject);
```

### Options ###
`callback`: The callback to be executed when animation/timeout ends

`animationType`: Defaults to `transition` can also be `animation` if keyframes are being used

`time`: If using a timeout, the time to be used

`singleListener`: Defaults to `true`. Whether to only allow one event listener on a given element at a time. This can be useful when working with animations that can be stopped partway through so the event listener doesn't fire at the wrong end of the animation

### Fallbacks ###
If you're planning on utilizing timing events but want to support browsers that don't support those events, simply pass a `time` into your object with the correct amount of time the animation. The plugin will detect that those events are supported and default to the timeout

## Useful grunt tasks ##
* `lint` - Check your code

## Examples ##
Run `npm run examples` to start a server and view the different examples

This starts a server running at `localhost:8080/`

## Coming soon ##
~~Support for `transitionEnd` events~~