Performant Scroll-driven Interactions – scrollama.js

Category: Javascript , Recommended | November 21, 2017
Author: russellgoldenberg
Views Total: 153
Official Page: Go to website
Last Update: November 21, 2017
License: MIT

Preview:

Performant Scroll-driven Interactions – scrollama.js

Description:

scrollama.js is a JavaScript library to create scroll-driven interactions that use Intersection Observer API for performant scroll position detection.

Installation:

# NPM
$ npm install scrollama --save
import scrollama from 'scrollama'

How to use it:

Create a new scrollama instance.

const myScroller = Scrollama();

Setup the instance with the following parameters.

myScroller.setup({

  // required
  // step elements that will trigger changes
  step: '.scroll__text .step', 

  // required
  container: '.scroll',        

  // required (for sticky)
  graphic: '.scroll__graphic', 

  // optional, default = 0.5
  offset: 0.5,          

  // optional, default = false       
  debug: false
             
})

Event handlers.

myScroller.setup(
 
  // ...
             
})
.onStepEnter(callback)
.onStepExit(callback)
.onContainerEnter(callback)
.onStepProgress(callback)
.onContainerExit(callback)

API methods.

myScroller.setup(
 
  // ...
             
})

// Get or set the offset percentage
myScroller.offsetTrigger(number)

// Get latest dimensions the browser/DOM
myScroller.resize()

// Resume observing for trigger changes
myScroller.enable()

// Stop observing for trigger changes.
myScroller.disable()

Leave a Reply