Cara Marketer Indonesia Pasang CSS Scroll-Driven Animations di Next.js untuk Hero & Section Reveal, Pangkas 28 KB JavaScript dan Hilangkan Library Intersection Observer di 2026

TL;DR: CSS Scroll-Driven Animations adalah API native untuk membuat animasi yang dipicu posisi scroll, tanpa JavaScript. Per Mei 2026 sudah didukung di Chrome 115+ dan Edge 115+. Memasangnya di Next.js untuk hero reveal dan section parallax memangkas rata-rata 28 KB bundle JavaScript dan menghilangkan dependency library Intersection Observer.

Saat refactor portfolio website Nalesha pada April 2026, saya menghapus 3 library JavaScript: framer-motion scroll effects, react-intersection-observer, dan custom hook scroll listener. Pengganti tiga library itu? Dua property CSS: animation-timeline dan view-timeline. Total bundle JavaScript turun dari 184 KB ke 156 KB, dan Lighthouse Performance Score naik dari 87 ke 94.

Apa itu Scroll-Driven Animations?

CSS Scroll-Driven Animations memungkinkan animasi CSS dipicu oleh posisi scroll, bukan waktu. Per dokumentasi resmi MDN tentang scroll-driven animations, API ini punya dua mode utama. Pertama, scroll() timeline yang mengikuti scroll progress halaman. Kedua, view() timeline yang mengikuti posisi elemen di viewport.

Bandingkan dengan pendekatan tradisional yang butuh Intersection Observer API atau library framer-motion. Pendekatan CSS native menghapus runtime JavaScript untuk scroll detection.

Setup di Next.js 15

Tambahkan ke globals.css tanpa konfigurasi tambahan:

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-reveal {
  animation: fade-in-up linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

view() timeline dipicu ketika elemen mulai masuk viewport. animation-range mengontrol kapan animasi dimulai dan berakhir relatif terhadap posisi elemen di viewport.

Studi Kasus: Nalesha Portfolio

Sebelum refactor, halaman portfolio Nalesha pakai framer-motion untuk 8 section reveal dan parallax hero. Bundle JavaScript di halaman ini 184 KB. Setelah refactor jadi CSS Scroll-Driven Animations, bundle turun ke 156 KB. Lighthouse Performance naik dari 87 ke 94.

CSS bertambah 3 KB tapi JavaScript turun 28 KB. Net saving 25 KB transfer size.

Pola Umum untuk Marketer

Tiga use case yang paling sering saya pakai di portfolio dan landing page klien:

1. Hero parallax: gambar bergerak slower dari scroll
2. Section reveal: fade in saat section masuk viewport
3. Progress bar artikel: bar di top yang mengikuti scroll progress

Semua tiga pola di atas bisa dikerjakan dengan animation-timeline dan view-timeline, tanpa JavaScript.

Fallback untuk Browser Lama

Safari per Mei 2026 belum mendukung sepenuhnya. Gunakan @supports untuk fallback:

@supports (animation-timeline: view()) {
  .section-reveal {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@supports not (animation-timeline: view()) {
  .section-reveal {
    opacity: 1;
  }
}

Strategi ini menampilkan elemen langsung di Safari tanpa animasi, dan animasi penuh di Chrome/Edge. UX tidak rusak.

Pertanyaan Umum

Apakah Safari sudah mendukung?

Per Mei 2026, Safari 17 mendukung sebagian, terutama animation-timeline tetapi tidak semua property animation-range. Gunakan @supports untuk fallback.

Apakah ini mempengaruhi Core Web Vitals?

Berdampak positif. Karena tidak ada JavaScript runtime untuk scroll detection, Total Blocking Time turun dan CLS tetap stabil karena animasi murni transform/opacity.

Apakah bisa dipakai dengan Tailwind CSS?

Bisa. Tambahkan custom utility di globals.css atau pakai @layer utilities. Tailwind v4 sudah support arbitrary properties yang dibutuhkan.

Apakah cocok untuk landing page konversi?

Cocok. Banyak landing page klien saya pakai pola ini untuk reveal testimonial section dan CTA section. Konversi naik tipis karena perceived performance lebih cepat.

Penutup

CSS Scroll-Driven Animations memindahkan beban scroll detection dari JavaScript ke browser engine. Untuk marketer Indonesia yang membangun portfolio atau landing page di Next.js, pemangkasan 28 KB JavaScript sambil mempertahankan animasi yang mulus adalah trade-off yang nyaris tanpa kompromi.

Mulai dari satu komponen, misalnya section reveal di landing page utama. Ukur Lighthouse Performance sebelum dan sesudah. Kalau hasilnya positif, lanjut ke seluruh halaman.