Menambahkan efek masuk dan keluar ke elemen saat elemen masuk atau keluar dari area scroll

Fitur web: Animasi berbasis scroll

Efek masuk dan keluar adalah animasi yang dipicu saat elemen masuk atau keluar dari area pandang. Hal ini dapat digunakan untuk menciptakan pengalaman pengguna yang menarik dan dinamis. Misalnya, Anda dapat menggunakan efek masuk untuk memunculkan elemen secara bertahap saat di-scroll ke tampilan, atau efek keluar untuk memperkecilnya saat di-scroll keluar dari tampilan.

Cara menerapkan

Untuk menambahkan efek masuk dan keluar ke elemen, Anda perlu menggabungkan beberapa properti CSS. Berikut panduan langkah demi langkahnya:

  1. Buat @keyframes terpisah untuk animasi masuk dan keluar. Animasi masuk akan diterapkan saat elemen memasuki area pandang, dan animasi keluar akan diterapkan saat elemen keluar.

    @keyframes slide-in {
  from { transform: translateX(-100%); }
}
@keyframes slide-out {
  to { transform: translateX(100%); }
}

  2. Kaitkan keyframe masuk dan keluar ke elemen. Anda dapat melakukannya dengan menentukan beberapa animasi di properti animation.

    • Berikan animation-fill-mode dari backwards ke animasi masuk sehingga animasi tersebut menerapkan status awalnya sebelum animasi dimulai.
    • Beri animasi keluar animation-fill-mode dari forwards sehingga animasi mempertahankan status akhirnya setelah animasi selesai.
    .animated-element {
  animation:
    slide-in 1s linear backwards,
    slide-out 1s linear forwards;
}

  3. Buat Linimasa Tampilan dan tautkan ke animasi. View Timeline adalah jenis linimasa yang dikaitkan dengan visibilitas elemen di area pandang. Anda dapat membuatnya menggunakan fungsi view(), lalu menerapkannya ke animasi menggunakan properti animation-timeline.

    .animated-element {
  animation-timeline: view();
}

    Secara default, view() melacak elemen pada sumbu block. Jika perlu melacaknya pada sumbu inline, Anda dapat menggunakan view(inline).

  4. Batasi animasi ke rentang entry dan exit. Properti animation-range memungkinkan Anda menentukan bagian linimasa mana yang harus menjalankan animasi.

    • Rentang entry mencakup waktu dari saat elemen pertama kali memasuki area tampilan hingga terlihat sepenuhnya.
    • Rentang exit mencakup waktu sejak elemen mulai keluar dari area pandang hingga elemen tersebut sepenuhnya tersembunyi.
    .animated-element {
  animation-range: entry, exit;
}

Kode contoh

Kode ini menganimasikan turunan langsung dari scroller saat di-scroll menggunakan view-timeline anonim:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: view(inline);
      animation-range: entry, exit;
    }
  }
}

Saat elemen memasuki area scroll, animasi grow akan diputar, dan saat elemen keluar dari area scroll, animasi shrink akan diputar.

Kode berikut memiliki hasil visual yang sama, tetapi menganimasikan turunan langsung scroller saat di-scroll menggunakan view-timeline bernama:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      view-timeline: --tl inline;
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: --tl;
      animation-range: entry, exit;
    }
  }
}

Praktik Terbaik

Saat menggunakan animasi berbasis scroll, penting untuk mengikuti beberapa praktik terbaik guna memastikan pengalaman yang lancar dan mudah diakses:

  • LAKUKAN penyertaan deteksi fitur: Tidak semua browser mendukung animasi berbasis scroll. Gunakan @supports ((animation-timeline: view()) and (animation-range: entry)) untuk memeriksa dukungan dan menyediakan penggantian untuk browser yang tidak mendukungnya.
    • Pemeriksaan (animation-range: entry) HARUS disertakan di sini, untuk memfilter browser yang hanya memiliki dukungan parsial.
    • JANGAN gunakan paket scroll-timeline-polyfill untuk strategi penggantian karena fiturnya tidak lengkap dan memiliki banyak masalah umum.
    • Jika animasi hanya dianggap sebagai dekoratif, pilih Progressive Enhancement dan JANGAN berikan penggantian.
  • LAKUKAN penghormatan terhadap preferensi pengguna: Beberapa pengguna lebih memilih untuk memiliki lebih sedikit gerakan di web. Gunakan kueri media prefers-reduced-motion untuk menonaktifkan atau mengurangi animasi bagi pengguna ini.
  • LAKUKAN upaya untuk menganimasikan hanya properti CSS yang berperforma tinggi: Untuk animasi yang paling lancar, tetap gunakan properti animasi yang dapat ditangani oleh thread compositor browser, seperti transform dan opacity. Menganimasikan properti lain seperti width atau height dapat menyebabkan masalah performa.
  • LAKUKAN penggunaan urutan deklarasi yang benar: Saat menggunakan properti singkat animation, deklarasikan animation-timeline setelahnya untuk mencegah properti singkat mereset linimasa.

Saat menggunakan fungsi view() untuk membuat animasi berbasis scroll:

  • OPSIONAL jelaskan sumbu yang akan dilacak: Jika tidak menargetkan sumbu block default (seperti dalam scroller horizontal), jelaskan sumbu yang akan dilacak dengan view(block) atau view(inline).
  • Jika animasi tidak diterapkan ke subjek yang dilacak itu sendiri, gunakan linimasa tampilan bernama.

Saat menggunakan properti view-timeline untuk membuat animasi berbasis scroll:

  • LAKUKAN penggunaan <dashed-ident> CSS untuk nama.
  • OPSIONAL tentukan sumbu yang akan dilacak: Jika tidak menargetkan sumbu block default (seperti dalam scroller horizontal), tentukan sumbu yang akan dilacak dengan view-timeline-axis.
  • LAKUKAN: pastikan cakupan pencarian berfungsi: Jika elemen yang mendeklarasikan view-timeline bukan ancestor hierarki datar dari elemen animasi, naikkan visibilitas nama view-timeline menggunakan timeline-scope pada ancestor bersama.

Pilih view-timeline bernama jika beberapa elemen atau turunan dari subjek yang dilacak perlu dianimasikan.

Dukungan browser dan strategi penggantian

Oleh karena itu, strategi penggantian biasanya diperlukan.

Untuk browser yang tidak mendukung animasi berbasis scroll, Anda dapat menggunakan penggantian untuk membuat ulang efek visual. Penggantian biasanya dibuat dengan pemroses scroll (untuk efek ScrollTimeline) atau IntersectionObserver API (untuk efek ViewTimeline).

Di browser dengan dukungan bawaan untuk animasi berbasis scroll, SELALU gunakan implementasi CSS native karena lebih berperforma.

Perhatikan bahwa tidak semua efek dapat dibuat ulang menggunakan pendekatan penggantian.

Khusus untuk kasus penggunaan ini, skrip berikut menerapkan penggantian untuk browser yang tidak mendukung animasi berbasis scroll. Kode ini menggunakan IntersectionObserver untuk melacak visibilitas elemen .wrapper dan memperbarui properti transform lapisan berdasarkan posisi scroll.

<script>
  if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          // This matches the effect as defined in the CSS example above.
          // Customize this further if needed.
          entry.target.style.scale = 0.5 + entry.intersectionRatio * 0.5;
        }
      },
      {
        threshold: Array.from({ length: 101 }, (_, i) => i / 100),
      }
    );

    document.querySelectorAll('.scroller > *').forEach((el) => {
      observer.observe(el);
    });
  }
</script>