JS : Scroll to trigger Animation
import offset from './getOffset';
//Ref: https://envato.com/blog/triggering-css-animations-scroll/
export default function() {
let windowHeightPlusPadding = window.outerHeight * .8;
let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
let targets = document.querySelectorAll('[data-animation]:not(.animated)');
[].forEach.call(targets, function(elem){
let offsetTop = offset(elem).top;
if (scrolled + windowHeightPlusPadding > offsetTop) {
if (elem.hasAttribute('data-timeout')) {
window.setTimeout(function() {
if(-1 == elem.className.indexOf('animated'))
elem.className = elem.className + ' animated ' + elem.dataset.animation
}, parseInt(elem.dataset.timeout) );
} else {
if(-1 == elem.className.indexOf('animated'))
elem.className = elem.className + ' animated ' + elem.dataset.animation
}
}
});
}
import revealOffset from './util/reavealOffset'
//Run on Page Refresh
revealOffset();
//Run on Scroll
window.onscroll = revealOffset();
//Ref: https://plainjs.com/javascript/styles/get-the-position-of-an-element-relative-to-the-document-24/
export default function(element) {
var rect = element.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}