animation-bus

Animation Bus 🚌

Define different animation stops relative to another value.

Install

yarn add animation-bus

npm install animation-bus --save

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

Example

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 and all of his work on Flickity Transformer, as well as this amazing gist by Grégoire Piffault. Most of the code in here is heavily inspired by what these developers have previously done.