on scroll animation
<!--follow steps -->
copy css code and paste in your css area
copy js code and paste in your js area
// if you want to more learn you wisit our website http://roginetwork.com/
// Rogi Network
// +923022020318
// [email protected]
<!--follow steps -->
<style>
@keyframes animationOnscroll {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>
<script>
const rogi = document.querySelectorAll(".animation-onscroll");
observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animation = `anim1 2s ${entry.target.dataset.delay} forwards ease-out`;
} else {
entry.target.style.animation = "none";
}
});
});
rogi.forEach((image) => {
observer.observe(image);
});
</script>