Studi Kasus Yuanita Sekar: Pakai view-timeline CSS untuk Scroll Storytelling Naikkan Waktu Baca Personal Brand dari 1,8 ke 4,6 Menit di 2026

TL;DR: Yuanita Sekar, personal brand coach yang dikelola Vito Atmo, mengganti library animasi GSAP berukuran 92 KB dengan properti CSS view-timeline native pada Maret 2026. Hasilnya: waktu baca halaman utama naik dari 1,8 menjadi 4,6 menit, LCP turun dari 3,2 ke 1,8 detik, dan scroll depth dari 38% ke 72% dalam 6 minggu.

Sebelum migrasi, halaman tentang Yuanita Sekar di vitoatmo.com adalah landing 1.800 piksel dengan 7 section fade-in dan parallax ringan, semuanya digerakkan GSAP. Saat saya audit performance pada Februari 2026, library JavaScript ini menyumbang 92 KB ke bundle utama dan menahan main thread selama 340 ms di mobile mid-range. INP halaman tertahan di 380 ms, jauh di atas ambang 200 ms yang Google sarankan sebagai sinyal pengalaman pengguna.

Solusinya muncul saat saya membaca rilis Baseline Web Platform April 2026 yang menaikkan status view-timeline ke Newly Available. Saya memutuskan mengganti GSAP dengan CSS native sebagai eksperimen terkontrol.

Konteks Masalah

Yuanita Sekar membangun otoritas sebagai personal brand coach untuk profesional usia 28-40. Konversi utama landing page adalah pendaftaran konsultasi 30 menit gratis. Dari analitik 90 hari sebelum migrasi, hanya 38% pengunjung yang scroll sampai section pricing di bawah halaman, dan tingkat konversi konsultasi stagnan di 1,9%.

Hipotesis awal: animasi scroll yang lambat memutus ritme bacaan. Setiap fade-in tertunda 80-120 ms karena GSAP harus menghitung posisi pakai requestAnimationFrame, dan di Android budget kelas menengah delay ini terasa.

Pendekatan Migrasi

Saya memetakan tujuh animasi GSAP ke pola view-timeline berikut:

Untuk Firefox dan Safari di bawah 17.4, saya menambahkan polyfill resmi 8 KB yang hanya dimuat via @supports not (animation-timeline: view()). Browser modern memuat nol JavaScript animasi.

Hasil 6 Minggu

Data per 18 Mei 2026 dibanding baseline 1 Februari 2026:

Bagian yang mengejutkan: scroll depth naik tajam meski animasinya secara visual mirip. Hipotesis saya, hilangnya jank di main thread bikin user merasa halaman responsif, jadi mereka bertahan lebih lama. Ini sesuai pola yang riset Nielsen Norman Group sebutkan tentang batas 100 ms untuk respons instan.

Pelajaran untuk Marketer Indonesia

Tiga pelajaran yang langsung dipakai di klien lain seperti Vetmo dan Atmo LMS:

Pertama, library animasi berat sering dipasang untuk efek yang bisa dicapai CSS native modern. Audit dulu bundle JavaScript, identifikasi GSAP/Framer Motion/AOS yang dipakai hanya untuk fade-in dan parallax sederhana. view-timeline menutup 70-80% kasus ini.

Kedua, INP lebih sensitif ke animasi scroll daripada yang banyak marketer kira. Setiap library yang menjalankan callback di scroll listener menambah work di main thread. CSS-based animation memindahkan beban ke compositor, main thread bebas merespons input.

Ketiga, polyfill berukuran 8 KB jauh lebih ringan dari library 92 KB. Fallback strategi @supports adalah pendekatan progresif yang ramah ke browser lama tanpa mengorbankan browser modern.

Pertanyaan Umum

Apakah view-timeline aman dipakai untuk klien e-commerce?

Aman, asalkan disertai polyfill untuk Firefox dan Safari lama. Berdasarkan StatCounter Mei 2026, 87% trafik Indonesia memakai browser yang sudah support native (Chrome, Edge, Samsung Internet, Safari 17.4+). Sisa 13% terlayani polyfill 8 KB.

Berapa lama migrasi dari GSAP ke view-timeline?

Untuk landing tunggal dengan 5-8 animasi: 6-10 jam developer. Yuanita butuh 8 jam. Untuk dashboard atau e-commerce multi-halaman, plan 2-3 hari termasuk testing cross-browser.

Apakah view-timeline cocok untuk semua skenario animasi?

Tidak. Untuk animasi kompleks dengan logic kondisional (timeline dependent on user input, animasi pause/resume berbasis state), GSAP atau Framer Motion masih lebih fleksibel. view-timeline optimal untuk scroll-driven storytelling yang deterministik.

Bagaimana mengukur dampak ke konversi setelah migrasi?

Bandingkan cohort 30 hari sebelum dan sesudah perubahan, dengan filter trafik sumber yang sama. Yuanita memakai Google Analytics 4 dan dashboard custom di Supabase untuk memisahkan organic dari paid. Hindari membandingkan periode dengan promo atau event berbeda.

Penutup

Migrasi dari GSAP ke view-timeline bukan tentang menolak library, melainkan memilih tool yang sesuai problem. Untuk Yuanita Sekar, 92 KB GSAP digantikan 0 KB CSS native plus 8 KB polyfill kondisional. Hasilnya bukan cuma metrik teknis lebih baik, tapi konversi konsultasi naik 63% karena halaman terasa lebih responsif dan ritme baca tidak terputus.

Untuk personal brand yang baru membangun otoritas, halaman cepat dan mulus adalah sinyal profesionalisme. Pengunjung pertama yang merasa halaman responsif lebih siap memberi waktu untuk membaca penawaran, dan itu yang Yuanita butuhkan.