Apa Itu Scroll Triggered Animation dan Bedanya dengan Scroll Driven

Di komunitas frontend Indonesia, dua istilah ini sering dipakai bergantian: scroll-triggered animation dan scroll-driven animation.

Padahal keduanya adalah teknik yang berbeda secara fundamental — berbeda cara kerja di browser, berbeda use case, dan berbeda implikasi performanya.

Kalau kamu pernah pakai AOS.js, WOW.js, atau Intersection Observer untuk bikin elemen muncul saat di-scroll, itu bukan scroll-driven animation. Itu scroll-triggered.

Dan kalau kamu baru baca artikel tentang animationtimeline: scroll() di CSS, itu barulah scroll-driven animation yang sesungguhnya.

Artikel ini akan breakdownerbedaannya secara eksplisit — supaya kamu bisa memilih teknik yang tepat untuk project berikutnya.

Definisi Scroll-Triggered vs Scroll-Driven Animation

Perbedaan paling mendasar adaapa yang memicu animasi.

Scroll-Triggered Animation

Scroll-triggered animation bekerja dengan prinsip sederhana: scroll posisi tertentu memicu animasi yang sudah berdiri sendiri.

Analoginya seperti menekan tombol lampu. Scroll adalah jarimu yang menekan tombol. Lampu menyala, lalu mati sendiri — tidak peduli kamu terus scroll ke mana.

Animasi yang dipicu berjalan dari awal sampai akhir secara independen, tanpa koneksi langsung keisi scroll.

// Contoh scroll-triggered dengan Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Animasi "dipicu" saat elemen masuk viewport
      entry.target.classList.add('animate-in');
    }
  });
}, { threshold: 0.2 });

document.querySelectorAll('.reveal').forEach(el => {
  observer.observe(el);
});

CSSasinya berjalan normal —anya class yang ditambahkan oleh JavaScriptaat threshold terpenuhi.

3>Scroll-Driven AnimationScroll-driven animation berbeda: progress animasi secara langsung dikontrol oleh posisi scroll.

Analoginya seperti volume knob. Semakin k putar, suara semakin keras. Kalau kamu putar balik, suara mengecilagi. Animasi dan adalah satu kesatuan yangerhubung.

/* Contoh scroll-driven animation dengan CSS native */
@keyframes revealtext {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-driven-element {
  animation: reveal-text linear;
  animation-timeline: scroll(root);
  animation-range: entry0% entry 40%;
}

Di sini, animasi tidak "dipicu" — iaberjalan sesuai progres scroll secara real-time dan bisaaju mundur.

Bagaimana Browser Memproses Keduanya Secara Berbeda

Ini bagian paling sering diabaikan developer padahal krusial untuk performa.

Scroll-Triggered: Main Thread DependentScroll-triggered animation via JavaScript (termasuk Intersection Observer) tetap melibatkan main thread untuk memutuskan kapan animasi mulai.

Alurnya kurang lebih begini

• Browser mendeteksi scroll event atau intersection
• JavaScript callback dijalankan di main thread
• DOMmanipulasi (classambahkan, styleubah)
• Browser melakukan reflow/repaint jika diperlukan
• Animasi CSSerjalan di compositor thread

Intersection Observer sendiri sudah jauh lebih efisien dibanding listenerscrollasa karena tidak blocking setiap frame.

Tapi tetap saja adaeda antara kondisi terpenuhi dan animasi dimulai terutama di main thread yang sedang sibuk.

Scroll-Driven: Off the Main Thread

CSS scroll-driven animation dengananimation-timeline bekerja sepenuhnya di compositor thread.

Ini berarti animasi terus berjalan mulus bahkan ketika JavaScriptang melakukan pekerjaan berat main thread.

Tidak ada callback Tidak ada event listener. Browser langsung menghitung progres animasi dari position tanpa melewati sama sekali.

Hasilnya: animasi yang jauh lebih smooth, dengan frame rate yang konsisten bahkan di device mid-range.

Kapan Pakai Scroll-Triggered dan Kapan Pakai Scroll-Driven

Tidak ada yang lebih baik secara absolut. Keduanya punya tempat masing-masing.

3>Gunakan Scroll-Triggered Ketika

• Animasi satu arah: euncul saat masuk viewport, tidak perlu "balik" s-scroll keatas
• Logika kondisional kompleks: animasi berbeda bergantung pada state aplikasi, user role, atau data APIPerlu side effect: animasi yang juga memicu analytics event, perahan state, atau fetch data
• Browser supportuas: Intersection Observer sudah support sampai IE11(dengan polyfill),-driven masih relatif baru
• Integrasi framework: React, Vue, Angular —ih mudah mengontrol scroll-triggered lewat state management yang sudah ada

Gunakan Scroll-Driven Ketika

• Parallax effect: elemen yang bergerak mengikuti scroll secara proporsional
• Progress indicator: reading progress bar dianjang
• Sticky animation: elemen yang berah saat user menya
• Timeline storytelling: narasi visualnyaerikat langsung keisi scroll
• Performa kritis: ketika smooth60fps adalah non-negotiable dan main thread harus bebas

Panduan sederhananya: kalau animasi bmaju mundur" sesuai scroll, pakai scroll-driven. Kalau animasi cukup "sekali jalan" elemen terlihat, pakai scroll-triggered.

Implementasi Scroll-Triggered dengan Intersection Observer

Observer adalah standar emas untuk scroll-triggered animation di2026. Ini cara implementsinya yang clean dan performant.

Setup Dasar

// observer.js - Reusable scroll trigger utility
export function createScrollTrigger(options = {}) {
  const defaultOptions = {
    threshold: 0.15,
    rootMargin: '0px 0px -50px 0px',
    once: true // Animasi hanya sekali
  };

  const config = { ...defaultOptions, ...options };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        
        if (config.once) {
          observer.unobserve(entry.target);
        }
      } else if (!config.once) {
        entry.target.classList.remove('is-visible');
      }
    });
  }, {
    threshold: config.threshold,
    rootMargin: config.rootMargin
  });

  return observer;
}

// Penggunaan
const trigger = createScrollTrigger({: 0.2 });
document.querySelectorAll('[data-scroll-trigger]').forEach(el => {
  trigger.observe(el);
});

CSS

/* Base state elemen tersembunyi sebelum dipicu */
[data-scroll-trigger] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Stateaat dipicu oleh Intersection Observer */
[data-scroll-trigger].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variasi delay untuk staggered effect */
[data-scroll-trigger]:nth-child(2) { transition-delay: 0.1s; }
[data-scroll-trigger]:nth-child(3) { transition-delay: 0.2s; }
[data-scroll-trigger]:nth-child(4) { transition-delay: 0.3s; }

Penting AccessibilityJangan lupa user prefer reduced motion. Iniukan opsional — ini kewajiban accessibility.

/* Hormensi usermedia (prefers-reduced-motion: reduce) {
  [data-scroll-trigger] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}>Dengan ini, user mengaktifkan "reduce motion" di sistem opersinya tidak akan melihat animasi yang bicu masalah vestibular.

asi Scroll-Driven untuk Progress Bar

Sebagai pembanding, ini reading progress bar dengan-driven —pa JavaScript:

@keyframes progress-grow {
  from { width: 0%; }
  to   { width: 100%; }
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: #6366f1;
  
  animation: progress-grow linear;
  animation-timeline: scroll(root block);
}


Cukup segitu ada tidak ada event listener, tidak ada state hasilnya lebih smooth dariasi JavaScript manapun.

Kesitan dengan tugas programming butuh bantuan coding? KerjaKode siap membantu menyelesaikan tugas ITnik informat Anda.patkan bantuan profesional dijasa tugas IT KerjaKode.2>Per Trade-off yang Harus K TahuSeum memnik, pahami dulu implikasi performa masing-masing.

Trade-off Scroll-TriggeredKeunggulan:

  
Lebih mudah debug logika ada di JavaScript bisa di-inspectFleksibel untuk kondisi kompleks
  
Browser support lebih luas
  
Mudah diintegrasikan dengan framework state management


Kelemahan:

  
Bergantung pada main thread untuk timingLibraryihak ketiga (GSAP ScrollTrigger, AOS)ambah bundle size
  
Kalau tidak h-hati, bisa bikin layout thrashing


Trade-off Scroll-Driven

Keunggulan:

  
Zero untukasuserhana
  
Balan di compositor thread — sangat smooth size tambahan
  


Kelemahan:
Browser masih terbatas — Chrome 115+, Firefox 110+, Safari 18+
  
Debugging lebih sulit karena tidak ada JavaScript hookLogisional sulit diimplementasikan murni dengan
  
Sintaks animation masih cukup membingungkan untukasus kompleks


SatuAturan Praktis

Untuk project production Indonesia yangarus support device-range dan Androidama, pertimbangkan pendekatan hybrid:


  
Gunakan scroll-driven untuk elemen dekoratif (progress bar, parallax background)
  
Gunakan scroll-triggered + Intersection Observer untuk konten utama yanglu graceful fallback
  
Selalu sertakan prefers-reduced-motion tanpa terkecuali


Cek browser sebelum deploy-driven ke production. Gunakan @supports (animation-timeline: scroll()) sebagai feature detectionika diperlukan.

@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: progress-grow linear;
    animation-timeline: scroll(root);
  }
}

/* Fallback untuk browser yang tidak support */
@supports not (animation-timeline: scroll()) {
  .progress-bar {
    display: none; /* Atau fallback lainsuai */
  }
}

Ringkasan Perbandingan

Kalau harus dishanakan dalam satu tabel mental>
  
Scroll-triggered: scroll → deteksi → animasi jalan → selesai
  
Scroll-driven: scroll position =asi, real-time, drah


Keduanya bukan competing technology — mereka solvingalah yang berbeda.

Memami perbedaan ini bukan cuma soal pilihan teknisih tepat. Iniuga soal tidak over-engineering: semua efek scrolllu pakai GSAP, dan tidak semua elemen "reveal" perlu scroll.

Yang penting adalah kapan tiap teknik memberikan hasil terbaik denganaya performa dan kompleksitas yang paling minimal.