Define different animation stops relative to another value.
npm install animation-bus
Define different animation stops relative to another value.
yarn add animation-bus
npm install animation-bus --save
``htmlAnimationBus
(UMD library exposed as )`
`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);
``
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.