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;
}