Studi Kasus Yuanita Sekar: Intersection Observer Trigger Animasi Personal Brand Tanpa Library Animasi 2026

TL;DR: Pada website personal brand Yuanita Sekar, animasi section dipicu oleh Intersection Observer native, bukan oleh library animasi berat. Hasilnya bundle JavaScript tetap di bawah 90 KB, INP terjaga di 142 ms, dan animasi terasa halus di Moto G Power throttled 4G. Pola ini cocok untuk personal brand yang ingin tampil profesional tanpa membebani performa.

Yuanita Sekar adalah klien personal branding yang menargetkan audiens HR profesional. Saat brief awal di April 2026, beliau minta dua hal yang sering tampak bertentangan: tampilan yang halus dan elegan layaknya portfolio designer, tapi tetap cepat di koneksi 4G Indonesia. Banyak template personal brand memakai Framer Motion atau GSAP, dan keduanya menambah 30 sampai 60 KB ke bundle.

Strategi yang saya pakai untuk Yuanita: pakai Intersection Observer native untuk mendeteksi section masuk viewport, lalu toggle class CSS dengan transition. Animasi tetap halus, bundle tetap ramping, dan tidak ada library yang harus di-hydrate.

Masalah Awal

Versi pertama website Yuanita memakai Framer Motion untuk fade-in setiap section. Audit performa menunjukkan:

• Initial JS: 187 KB (Framer Motion + dependencies ikut)
• INP rata-rata: 280 ms di Moto G Power throttled 4G
• LCP: 2,1 detik, masih aman tapi bisa lebih baik
• Animasi terasa lag saat scroll cepat di halaman tentang

Audiens HR profesional cenderung scroll cepat untuk memindai kredensial. Lag saat scroll merusak kesan profesional yang justru ingin dibangun. Saya ulas lebih dalam soal trade-off animasi di artikel bundle size budget Next.js.

Pendekatan Solusi

Implementasi dipecah jadi tiga komponen kecil yang reusable. Pola atomic design tetap dipertahankan supaya DRY.

Snippet CSS:

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; } }

Penting menghormati prefers-reduced-motion agar pengguna yang sensitif tetap nyaman. Standar ini dibahas di WCAG 2.3.3.

Hasil yang Diukur

Setelah migrasi dari Framer Motion ke pola Intersection Observer native, hasilnya:

Audit dilakukan di Moto G Power dengan throttling Slow 4G di Chrome DevTools, sampel 20 trace, median dipakai. Lighthouse skor performance naik dari 78 ke 96. Pola yang sama saya pakai juga di website Atmo LMS, dengan dampak konsisten pada Core Web Vitals.

Pertanyaan Umum

Apakah animasi CSS native cukup canggih untuk personal brand?

Untuk fade, slide, scale, dan stagger sederhana, ya. Library animasi unggul ketika dibutuhkan physics-based animation, gesture interaktif, atau timeline kompleks. Personal brand jarang butuh yang ekstrem.

Apakah perlu mempertimbangkan SEO?

Konten utama tetap di server-render dan terbaca tanpa JavaScript. Animasi hanya enhancement visual, jadi tidak mempengaruhi crawl dan indexing.

Bagaimana dengan animasi yang harus berulang?

Untuk repeat animation, jangan .disconnect() setelah trigger pertama. Toggle class on/off berdasarkan isIntersecting. Konsekuensinya observer terus aktif dan sedikit menambah beban, jadi pakai dengan bijak.

Penutup Aplikatif

Personal brand profesional tidak harus mahal di sisi bundle. Mulai dari mengganti satu library animasi dengan kombinasi Intersection Observer dan CSS transition. Audit ulang dengan Lighthouse dan WebPageTest. Jika dampaknya jelas pada INP dan initial JS, lanjutkan pola yang sama untuk komponen lain seperti counter angka, parallax ringan, dan reveal heading.