add reveal to all the elements you want to apply transition on whrn scroll event hits function reveal() { let reveals = document.querySelectorAll(".reveal"); for (let i = 0; i < reveals.length; i++) { let windowHeight = window.innerHeight; let elementTop = reveals[i].getBoundingClientRect().top; let elementVisible = 100; if (elementTop < windowHeight - elementVisible) { reveals[i].classList.add("active"); } else { reveals[i].classList.remove("active"); } } } window.addEventListener("load", reveal); window.addEventListener("scroll", reveal); @keyframes fade-bottom { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes fade-left { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes fade-right { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .reveal { position: relative; opacity: 0; } .reveal.active { opacity: 1; } .active.fade-bottom { animation: fade-bottom 0.8s ease-in; } .active.fade-left { animation: fade-left 0.8s ease-in; } .active.fade-right { animation: fade-right 0.8s ease-in; }