Digital Transformation
view-timeline (CSS Property)
TL;DR: view-timeline adalah properti CSS yang memetakan progres animasi ke posisi elemen di viewport. Properti ini memungkinkan tim marketing menjalankan scroll-driven storytelling, fade-in section, dan parallax ringan tanpa library JavaScript tambahan. Dukungan stabil di Chrome 115+ dan Safari 17.4+.
Apa itu view-timeline?
view-timeline adalah bagian dari spesifikasi Scroll-driven Animations yang memberi tahu browser kapan animasi harus dimulai dan selesai berdasarkan posisi elemen di viewport. Dipasangkan dengan properti animation-timeline, view-timeline menggantikan kebutuhan IntersectionObserver dan library seperti GSAP untuk efek scroll sederhana. Konsepnya mirip CSS Scroll Snap, tapi fokus pada animasi, bukan posisi snap.
Cara Kerja
view-timeline mendaftarkan elemen sebagai sumber timeline. Properti view-timeline-name memberi nama, view-timeline-axis menentukan sumbu (block/inline), dan animasi merujuk nama tersebut.
.hero-image {
view-timeline-name: --hero-scroll;
view-timeline-axis: block;
}
.fade-text {
animation: fade-in linear;
animation-timeline: --hero-scroll;
animation-range: entry 0% cover 50%;
}
Browser mengikat progres animasi ke seberapa jauh .hero-image masuk viewport. Tidak ada listener JavaScript, tidak ada perhitungan posisi manual.
Kapan Pakai view-timeline?
| Skenario | Cocok |
|---|---|
| Fade-in section saat scroll | Ya |
| Progress bar reading | Ya |
| Parallax sederhana | Ya |
| Animasi kompleks dengan logic kondisional | Tidak, pakai Scroll Snap atau JavaScript |
| Kompatibilitas Firefox | Tidak per Mei 2026, butuh fallback |
Kenapa Penting?
Sebagian besar landing page B2B Indonesia masih memasang library animasi 40-80 KB hanya untuk efek fade-in. view-timeline memindahkan beban ke compositor browser, menghasilkan animasi 60 fps dengan main thread bebas. Dampaknya langsung ke LCP dan INP, dua dari tiga Core Web Vitals yang menjadi sinyal peringkat Google.
Sejak update Baseline Web Platform April 2026, view-timeline masuk kategori Newly Available, artinya aman dipakai dengan fallback @supports.
Pertanyaan Umum
Apakah view-timeline butuh polyfill?
Untuk Firefox dan Safari di bawah 17.4, ya. Polyfill resmi tersedia di repo Scroll-driven Animations, ukuran sekitar 8 KB gzipped. Alternatif: pakai @supports (animation-timeline: view()) untuk gracefully degrade.
Apa bedanya dengan IntersectionObserver?
IntersectionObserver memicu callback JavaScript saat elemen masuk viewport, tetap butuh kode JS untuk animasi. view-timeline mengikat animasi langsung ke timeline scroll, tanpa JavaScript runtime. Lebih hemat CPU dan main thread.
Istilah Terkait