/** * animate-in.js 1.0.0 * Animate elements on entrance * * Usage: * * Make sure to add this to the of your page to avoid flickering on load * Based on https://andycaygill.github.io/scroll-entrance/ */ (function() { //Set up defaults var duration = "1000"; var heightOffset = 100; // document.write("") function isElementVisible(elem) { var rect = elem.getBoundingClientRect(); //Return true if any of the following conditions are met: return ( // The top is in view: the top is more than 0 and less than the window height (the top of the element is in view) ( (rect.top + heightOffset) >= 0 && (rect.top + heightOffset) <= window.innerHeight ) || // The bottom is in view: bottom position is greater than 0 and greater than the window height ( (rect.bottom + heightOffset) >= 0 && (rect.bottom + heightOffset) <= window.innerHeight ) || // The top is above the viewport and the bottom is below the viewport ( (rect.top + heightOffset) < 0 && (rect.bottom + heightOffset) > window.innerHeight ) ) } function update() { var nodes = document.querySelectorAll("*:not(.animate-in-done)[class^='animate-in'], *:not(.animate-in-done)[class*=' animate-in']") for (var i = 0; i < nodes.length; i++) { if (isElementVisible(nodes[i])) { nodes[i].classList.remove("out-of-viewport") nodes[i].classList.add("animate-in-done") } else { nodes[i].classList.add("out-of-viewport") } } } document.addEventListener("DOMContentLoaded", function(event) { update() // setTimeout(function() { // document.querySelector("#temp-animate-in").remove() // }) }); window.addEventListener("scroll", function() { update() }) })();