/ CSS / .reveal{position:relative;transform:translateX(200px);opacity:0;transition:1s all ease;} .reveal.active{transform:translateX(0);opacity:1;} / JavaScript / function reveal() { var reveals = document.querySelectorAll(".reveal"); for (var i = 0; i < reveals.length; i++) { var windowHeight = window.innerHeight; var elementTop = reveals[i].getBoundingClientRect().top; var elementVisible = 150; if (elementTop < windowHeight - elementVisible) { reveals[i].classList.add("active"); } else { reveals[i].classList.remove("active"); } } } window.addEventListener("scroll", reveal);