souporseriousAnimation 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.