Performant Scroll-driven Interactions – scrollama.js

Category: Javascript , Recommended | October 15, 2018
Author: russellgoldenberg
Views Total: 826
Official Page: Go to website
Last Update: October 15, 2018
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,       

  // whether to fire incremental step progress updates or not.
  progress: false,

  // the granularity of the progress interval, in pixels
  threshold: 4,
 
  // whether to preserve step triggering order if they fire out of sync (eg. ensure step 2 enters after 1 exits). 
  order: true,

  // Only trigger the step to enter once then remove listener.
  once: false,  

  // 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()

Changelog:

v1.4.4 (10/15/2018)

  • element as selector

Leave a Reply