effeck css

<script>
function revealElements(selector) {
  var elements = document.querySelectorAll(selector);
  var windowHeight = window.innerHeight;
  var elementVisible = 150;

  elements.forEach(function(element) {
    var elementTop = element.getBoundingClientRect().top;
    if (elementTop < windowHeight - elementVisible) {
      element.classList.add("active");
    } else {
      element.classList.remove("active");
    }
  });
}

window.addEventListener("scroll", function() {
  revealElements(".muncul, .muncul-kiri, .muncul-kanan, .zoom");
});
</script>

<style>
.muncul {
  position: relative;
  transform: translateY(6rem) scale(0.93);
  opacity: 0;
  transition: opacity 0.5s ease, transform 1s ease; /* Durasi muncul tanpa delay */
}

.muncul.active {
  transform: translateY(0);
  opacity: 1;
}

.muncul-kiri {
  position: relative;
  transform: translateX(-100%) scale(0.93);
  opacity: 0;
  transition: opacity 0.5s ease, transform 1s ease; /* Durasi muncul tanpa delay */
}

.muncul-kiri.active {
  transform: translateX(0);
  opacity: 1;
}

.muncul-kanan {
  position: relative;
  transform: translateX(100%) scale(0.93);
  opacity: 0;
  transition: opacity 0.5s ease, transform 1s ease; /* Durasi muncul tanpa delay */
}

.muncul-kanan.active {
  transform: translateX(0);
  opacity: 1;
}

.zoom {
  position: relative;
  transform: scale(0.5);
  opacity: 0;
  transition: opacity 0.5s ease, transform 1.5s ease; /* Durasi muncul tanpa delay */
}

.zoom.active {
  transform: scale(1);
  opacity: 1;
}
</style>