@okiba/scroller
v1.1.5
Published
Easily animate or run callbacks as your elements enter or leave viewport on scroll
Downloads
10
Readme
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 🔪