# animation-bus

> Define different animation stops relative to another value.

Latest version **0.2.0** (published 2016-11-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install animation-bus
pnpm add animation-bus
yarn add animation-bus
bun add animation-bus
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2016-11-28 |
| First published | 2016-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Travis Arnold |
| Maintainers | souporserious |
| Keywords | animation, polylinear, scale, transform |

## Links

- npm: https://www.npmjs.com/package/animation-bus
- Repository: https://github.com/souporserious/animation-bus
- Issues: https://github.com/souporserious/animation-bus/issues
- npm.io page: https://npm.io/package/animation-bus

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2016-11-28
- 0.1.0 — 2016-11-21

## README

## Animation Bus 🚌

[![npm version](https://badge.fury.io/js/animation-bus.svg)](https://badge.fury.io/js/animation-bus)

Define different animation stops relative to another value.

## Install

`yarn add animation-bus`

`npm install animation-bus --save`

```html
<script src="https://unpkg.com/animation-bus/dist/animation-bus.js"></script>
(UMD library exposed as `AnimationBus`)
```

### Example

```js
import AnimationBus from 'animation-bus'

const scrollElements = document.querySelectorAll('[data-scroll-bus]')
const windowFactor = 0.5
const elementFactor = 0.5
let isTicking = false
let scrollTop, scrollBottom

// Define animation stops
const animations = [{
  prop: 'backgroundColor',
  stops: [
    [-300, '#b4da55'],
    [0, '#2ea8ff'],
    [300, '#b4da55']
  ]
}, {
  prop: 'scale',
  stops: [
    [-300, 0.25],
    [0, 1],
    [300, 0.25]
  ]
}, {
  prop: 'opacity',
  stops: [
    [-300, 0],
    [0, 1],
    [300, 0]
  ]
}]

// Define animation stops
const origin = (element) => {
  const windowOffset = window.innerHeight * windowFactor
  const elementOffset = element.offsetHeight * elementFactor
  return scrollTop + windowOffset - elementOffset - element.offsetTop
}

// Instantiate a new animation bus
const animationBus = new AnimationBus({ animations, origin })

// Listen for window scroll and apply transforms to elements
function scrollHandler() {
  for (let i = 0; i < scrollElements.length; i++) {
    animationBus.applyStyles(scrollElements[i])
  }
  isTicking = false
}

window.addEventListener('scroll', function () {
  scrollTop = pageYOffset
  if (!isTicking) {
    window.requestAnimationFrame(scrollHandler)
  }
  isTicking = true
}, false);
```

## Thank You

Huge thank you to [Darin Reid](https://github.com/elcontraption) and all of his work on [Flickity Transformer](https://github.com/elcontraption/flickity-transformer), as well as [this amazing gist](https://github.com/gpiffault) by [Grégoire Piffault](https://github.com/gpiffault). Most of the code in here is heavily inspired by what these developers have previously done.

---
_Source: https://npm.io/package/animation-bus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._