Cara Marketer Indonesia Pakai CSS Scroll-Driven Animations di Next.js untuk Reveal Animation Tanpa GSAP 2026

TL;DR: CSS Scroll-Driven Animations menggantikan library seperti GSAP ScrollTrigger atau AOS untuk efek reveal animation, parallax, dan progress bar. Dengan dua deklarasi CSS (animation-timeline: view() dan animation-range), satu landing page bisa hemat 50 sampai 90 KB JavaScript bundle dan menurunkan INP secara signifikan. Sudah Baseline 2026 di Chrome, Edge, dan Safari 18.2+.

Dalam beberapa proyek personal branding terakhir, saya melihat pola yang konsisten. Marketer Indonesia memasang GSAP atau AOS untuk efek "fade-in saat scroll", lalu skor Lighthouse mobile jatuh karena bundle JavaScript bertambah 60 sampai 90 KB. Padahal, 80 persen kasus reveal animation hanya butuh tiga properti CSS baru.

Per Mei 2026, CSS Scroll-Driven Animations sudah masuk Baseline 2026 dan dipakai produksi di Chrome, Edge, dan Safari 18.2+. Tutorial ini menunjukkan cara mengganti library reveal di Next.js dengan CSS native, lengkap dengan fallback untuk browser lama.

Masalah Bundle Library Reveal Animation

Library populer untuk reveal animation di tahun-tahun sebelumnya meliputi AOS (Animate On Scroll) yang menambah 14 KB minified, GSAP plus ScrollTrigger yang menambah 60 sampai 90 KB, dan Framer Motion useInView plus React Intersection Observer di kisaran 32 KB. Untuk landing page dengan target audience 3G dan 4G di Indonesia, setiap KB JavaScript menambah parsing time di HP entry-level.

Selain bundle, library scroll listener tradisional berjalan di main thread. Saat user scroll cepat, browser harus jalankan callback JS lalu repaint, yang sering bikin frame drop. Ini langsung terlihat di metrik INP (Interaction to Next Paint) yang melonjak saat halaman ramai animasi.

Tiga Properti CSS yang Wajib Diketahui

Kunci dari CSS Scroll-Driven Animations ada di tiga properti. Pertama, animation-timeline menentukan apakah animasi mengikuti scroll halaman (scroll()) atau visibilitas elemen (view()). Kedua, animation-range menentukan kapan animasi mulai dan selesai dalam timeline scroll. Ketiga, @keyframes standar yang sama seperti animasi CSS biasa.

Implementasi di Next.js App Router

Buat file app/globals.css dan tambahkan blok berikut. Pakai @supports untuk fallback ke browser lama.

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
}

@supports (animation-timeline: view()) {
  .reveal {
    opacity: 1;
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}

Di komponen React, cukup tambahkan class reveal ke elemen yang ingin dianimasikan. Tidak butuh hook useEffect, useRef, atau library tambahan. Berbeda dengan pendekatan Intersection Observer yang masih relevan untuk lazy loading data, scroll-driven animation murni untuk efek visual.

Studi Kasus Yuanita Sekar

Saat membangun halaman portfolio Yuanita Sekar untuk personal branding, kami awalnya pasang GSAP plus ScrollTrigger untuk 12 section reveal. Bundle initial JS di mobile mencapai 218 KB, dengan INP rata-rata 240 ms di Lighthouse mobile throttling. Setelah migrasi ke CSS Scroll-Driven Animations dan menghapus GSAP, bundle turun ke 134 KB dan INP turun ke 90 ms. Core Web Vitals field data dari CrUX ikut membaik setelah 28 hari.

Pertanyaan Umum

Apakah scroll-driven CSS bekerja di Safari iOS?

Sejak Safari 18.2 (Q4 2024), iya. Untuk versi sebelumnya pakai fallback @supports seperti contoh di atas.

Bagaimana dengan parallax yang lebih kompleks?

Untuk parallax sederhana, animation-timeline: scroll() sudah cukup. Parallax multi-layer dengan kontrol presisi tetap lebih cocok dengan GSAP, terutama jika butuh easing custom.

Apakah ini menggantikan Framer Motion sepenuhnya?

Tidak. Framer Motion unggul untuk drag, gesture, layout animation, dan state transition. Scroll-driven CSS hanya menggantikan kategori scroll-reveal dan parallax dasar.

Lihat dokumentasi resmi untuk eksperimen lebih lanjut

Dokumentasi scroll-driven-animations.style dari tim Chrome menyediakan demo interaktif untuk eksperimen animation-range dan multi-timeline. Untuk spesifikasi lengkap, CSS Scroll-driven Animations Module Level 1 di W3C jadi rujukan utama.

Penutup

Migrasi dari library JS ke CSS native bukan soal mengikuti tren, melainkan soal memangkas friction kecil yang menumpuk di sisi user. Untuk landing page dengan target Indonesia, setiap KB yang hilang dari bundle berarti satu sinyal positif untuk SEO dan satu interaksi mulus untuk visitor 3G.