Animasi Scroll Reveal

Efek yang Kamu Kagumi Itu

Pernah buka landing page keren di mana teks meluncur masuk dari bawah saat kamu scroll? Itu "scroll reveal". Dulu butuh library, sekarang cukup dengan IntersectionObserver bawaan browser.

Langkah Membangun

HTML: Beberapa <section class="reveal"> berisi kartu-kartu. Tambahkan varian arah: reveal-kiri, reveal-kanan.

CSS: Elemen reveal awalnya opacity: 0; transform: translateY(40px) dengan transisi 0.6 detik. Saat punya class terlihat, kembali ke opacity: 1; transform: none.

JS: IntersectionObserver adalah "penjaga" yang memberi tahu saat elemen masuk/keluar viewport:

const pengamat = new IntersectionObserver((masuk) => {
  masuk.forEach((item) => {
    if (item.isIntersecting) {
      item.target.classList.add("terlihat");
      pengamat.unobserve(item.target); // animasikan sekali saja
    }
  });
});
document.querySelectorAll(".reveal").forEach((el) => pengamat.observe(el));

Kenapa Bukan Event Scroll?

Menghitung posisi tiap elemen di setiap event scroll itu berat. IntersectionObserver dioptimasi browser di level native, jauh lebih hemat baterai dan tidak patah-patah.

Kesalahan Umum

• Lupa unobserve sehingga animasi terpicu ulang setiap scroll naik-turun.
• Threshold tidak diatur sehingga elemen besar terpicu terlalu cepat (pakai threshold: 0.2 = 20 persen terlihat).
• Konten penting disembunyikan dari pengguna tanpa JS (pastikan konten tetap terbaca jika JS mati: tambahkan class reveal lewat JS, bukan di HTML).