okiba-scroller

A lightweight module to animate elements on your page as you scroll written in pure Javascript.

Setup

Download via npm

npm i @okiba/scroller

or use it via cdn

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

import 'OkibaScroller' from '@okiba/scroller'

const animator = OkibaScroller()

How use it

You can add all "animators" that you want!

Simple use

const boxes = Array.from(document.querySelectorAll('.box-1'))
animator.observe(boxes)
  .add({
    onEnter: function(observed) {
      observed.el.classList.add('visible')
    }
  })

Advanced use

Start adding the elements that you want to observe, adding callback if you want.

function onInit(observed) {
  console.log('onInit', observed)
}

function onCalculate(observed) {
  console.log('onCalculate', observed)
}

function onScroll(scrollY, deltaY) {
  console.log('onCalculate', observed)
}

const observed = animator.observe(
  Array.from(document.querySelectorAll('.box-1')),
  onInit, // optional, called when element is added
  onCalculate // optional, called every time that the element position in calculated
  onScroll, // optional, called when document scroll
)

Now you can add multiple sets of callback

observed.add({
  position: 'top', // optional, possible values are ['top', 'middle', 'bottom']
  offset: 0, // optional
  onEnter: function(observed, scrollY, deltaY) {
    // called when element enter in viewport based on position and offset settings

    // for example set an attribute
    observed.el.setAttribute('data-state', 'show');
    // or add a css class
    observed.el.classList.add('visible');
  },
  onRaf(): function(observed, scrollY, deltaY) { 
    // optional, called when element is in viewport based on position and offset settings
    // ... example of canvas animation when in viewport
    console.log('onRaf', observed)
  },
  onExit: function(observed, scrollY, deltaY) { 
    // optional, called when element exit in viewport based on position and offset settings
    observed.el.classList.remove('visible')
  }
}

An example to animate a canvas in viewport (animateOnce to false):

observed.add({
  onRaf: function(observed, scrollY, deltaY){
    observed.ctx.clearRect(0,0,300,150);
    observed.ctx.fillStyle="red";
    observed.ctx.fillRect(0,0,300,150);
  },
});

or play video only in viewport:

observed.add({
  onEnter: function(elem, scrollY, deltaY){
    elem.el.play();
  },
  onExit: function(elem, scrollY, deltaY){
    elem.el.pause();
  }
});

Be sure to polyfill if needed:

• window.requestAnimationFrame

ENJOY!

Okiba Gang 🔪