Scrollama is a modern & lightweight JavaScript library for scrollytelling using
IntersectionObserver
in favor of scroll events.
The code that accompanies the markup pictured above:
// instantiate the scrollama
const scroller = scrollama();
// setup the instance, pass callback functions
scroller
.setup({
container: '.scroll', // wrapping container
step: '.scroll__text .step', // all steps
graphic: '.scroll__graphic', // the sticky element
offset: 0.5, // optional, default = 0.5
})
.onStepEnter(handleStepEnter)
.onStepExit(handleStepExit)
.onContainerEnter(handleContainerEnter)
.onContainerExit(handleContainerExit);