A lightweight ( ~ 100 lines of code) and dependency-free library to animate elements on your page as you scroll written in pure Javascript.
var ScrollAnimator = require('YOURPATH/scroll-animator');Be sure to polyfill:
window.requestAnimationFrame
You can add all "animators" that you want!
The basic configuration is:
ScrollAnimator.addAnimator({
observed: elements,
callback: function(elem, scrollY){
// here you can add all what you want!
// for example set an attribute
elem.el.setAttribute('data-state', 'show');
// or add a css class
elem.el.classList.add('myNewCssClass');
},
});
or a complete configuration:
ScrollAnimator.addAnimator({
observed: elements,
animateOnce: true,
position: "top",
offset: 0,
callback: function(elem, scrollY){
elem.el.setAttribute('data-state', 'show');
},
});or an example to animate a canvas in viewport (animateOnce to false):
ScrollAnimator.addAnimator({
observed: elements,
animateOnce: false,
position: "top",
offset: 0,
callback: function(elem, scrollY){
elem.ctx.clearRect(0,0,300,150);
elem.ctx.fillStyle="red";
elem.ctx.fillRect(0,0,300,150);
},
});or play video only in viewport:
ScrollAnimator.addAnimator({
observed: elements,
animateOnce: false,
position: "top",
offset: 0,
callback: function(elem, scrollY){
if(elem.isPlaying) return;
elem.el.play();
elem.isPlaying = true;
},
callbackExit: function(elem, scrollY){
if(!elem.isPlaying) return;
elem.el.pause();
elem.isPlaying = false;
}
});Observed and callback are mandatory
| Param | Type | Description | Default |
|---|---|---|---|
| observed | Array |
Array of HTML nodes to animate | |
| animateOnce | boolean |
true if you want to execute the callback only once and false if you want to execute it until the HTML is in the position that you have defined |
true |
| position | String |
"top" if the animation start when the top of the element ( plus the offset ) reach the viewport and "middle" if you want that the animation start when the middle ( plus the offset ) of the element |
"top" |
| offset | number |
Pixel offset. | 0 |
| callback | function |
Callback function. This function receive 2 params: - elem is an object with a lot of information("el" => DOM node, "ot" => offsetTop, "ob" => offsetBottom, "ol" => offsetLeft, "or" => offsetRight, "bc" => result of getBoundingClientRect ), - scrollY : is the page scroll. | |
| callbackExit | function |
Callback function called when the element go outside the viewport. It receive the same params of callback |
If you want to get all nodes with the same class you can add this simple function:
function getElementByClass(className){
var elements = document.getElementsByClassName(className);
//html collection into array
return [].slice.call(elements);
}and then
var elements = getElementByClass('myCssClass');
ScrollAnimator.addAnimator({
observed: elements,
callback: function(elem, scrollY){
elem.el.setAttribute('data-state', 'show');
}
});
// start RAF
ScrollAnimator.onRaf();ENJOY!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent