Animation Bus 🚌
Define different animation stops relative to another value.
Install
yarn add animation-bus
npm install animation-bus --save
(UMD library exposed as `AnimationBus`)
Example
const scrollElements = documentconst windowFactor = 05const elementFactor = 05let isTicking = falselet scrollTop scrollBottom // Define animation stopsconst animations = prop: 'backgroundColor' stops: -300 '#b4da55' 0 '#2ea8ff' 300 '#b4da55' prop: 'scale' stops: -300 025 0 1 300 025 prop: 'opacity' stops: -300 0 0 1 300 0 // Define animation stopsconst origin = { const windowOffset = windowinnerHeight * windowFactor const elementOffset = elementoffsetHeight * elementFactor return scrollTop + windowOffset - elementOffset - elementoffsetTop} // Instantiate a new animation busconst animationBus = animations origin // Listen for window scroll and apply transforms to elements { for let i = 0; i < scrollElementslength; i++ animationBus isTicking = false} window;
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.