Trigger Functions Based On The Scroll Position – okiba-scroller

The okiba-scroller JavaScript library observes and determines the element position and trigger certain functions when the element enters, exits, or is already in the viewport.

Ideal for do cool things when a specific element is scrolled into view: update the nav item, play/pause the video, animate elements on scroll, etc.

How to use it:

Install the package and import the okiba-scroller as an ES6 module.

# NPM
$ npm install @okiba/scroller --save

import 'OkibaScroller' from '@okiba/scroller'

Or directly load the umd version in the HTML document.

<script src="https://unpkg.com/@okiba/scroller/dist/okiba-scroller.umd.min.js"></script>

Trigger a function when the element enters the viewport. In this example, the library will add a CSS class to the element when it is scrolled into view.

const myEl = Array.from(document.querySelectorAll('.element'))
animator.observe(myEl)
  .add({
    onEnter: function(observed, scrollY, deltaY) {
      observed.el.classList.add('visible')
    }
})

Trigger a function when the element exits the viewport. In this example, the library will add a CSS class to the element when it is scrolled out of the view.

const myEl = Array.from(document.querySelectorAll('.element'))
animator.observe(myEl)
  .add({
    onExit: function(observed, scrollY, deltaY) {
      observed.el.classList.remove('visible')
    }
})

Trigger a function when the element is in the viewport based on position and offset settings

const myEl = Array.from(document.querySelectorAll('.element'))
animator.observe(myEl)
  .add({
    position: 'top', // 'top', 'middle', 'bottom'
    offset: 0,
    onRaf(): function(observed, scrollY, deltaY) { 
    console.log('onRaf', observed)
  },
})

Event handlers.

animator.observe(myEl,
  onInit, // fired on init
  onCalculate, // fired every time on calculate
  onScroll // fired on scroll
)