Studi Kasus Yuanita Sekar: Ganti Framer Motion ke CSS @starting-style untuk Modal Konsultasi Pangkas Bundle 38 KB dan Naikkan INP dari 290 ke 110 ms di 2026

TL;DR: Modal booking konsultasi di personal brand Yuanita Sekar awalnya pakai Framer Motion untuk entry animation, kontribusi 38 KB gzipped ke bundle dan picu INP 290 ms saat tap "Booking Sekarang". Migrasi ke CSS @starting-style memangkas bundle 38 KB, INP turun ke 110 ms, dan conversion rate booking naik dari 2,1 ke 3,4 persen dalam 21 hari pengukuran.

Yuanita Sekar adalah klien personal branding coaching saya yang fokus di niche karir profesional muda. Modal booking konsultasi adalah CTA utama di personal brand site dia. Dalam audit performance Maret 2026, saya temukan modal entry animation yang seharusnya simple ternyata jadi bottleneck terbesar INP di halaman.

Konteks: Modal Konsultasi yang Lambat

Modal booking di site Yuanita awalnya pakai Framer Motion untuk fade-in dan slide-up. Library ini powerful, tapi untuk animasi entry sederhana terlalu berat. Hasil pengukuran RUM di Vercel Analytics minggu sebelum migrasi:

Masalah utama: setiap tap "Booking Sekarang" memicu hydration Framer Motion + run animation, yang berat di Android entry-level (target audience Yuanita banyak yang pakai Redmi 9-12 series).

Diagnosa: Animasi Entry Tidak Perlu JS

Setelah profiling di Chrome DevTools Performance tab, jelas bahwa animasi yang dipakai cuma fade-in opacity + translateY 20 piksel. Ini level animasi yang sejak 2024 sudah bisa dilakukan CSS murni pakai @starting-style.

Sebelum @starting-style, animasi entry CSS butuh trik double requestAnimationFrame atau setTimeout yang fragile. Sekarang cukup deklaratif:

.modalContent {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

@starting-style {
  .modalContent {
    opacity: 0;
    transform: translateY(20px);
  }
}

Implementasi: Refactor 3 Hari

Migrasi dilakukan bertahap pada minggu pertama April 2026:

Hari 1: Audit semua tempat Framer Motion dipakai. Ternyata 90 persen cuma untuk entry sederhana modal, toast, dan dropdown. Sisanya complex scroll-linked animation di halaman About.

Hari 2: Refactor modal booking ke native <dialog> element dengan @starting-style. Pakai Popover API sebagai fallback gracefully.

Hari 3: Remove Framer Motion dari halaman booking (tetap dipakai di halaman About). Testing cross-browser di Chrome Android, Safari iOS, dan Samsung Internet.

Hasil: Bundle Turun, INP Naik, Conversion Naik

Pengukuran 21 hari setelah migrasi (16 April - 7 Mei 2026):

Yuanita melaporkan UX feedback dari klien coaching dia: "Aplikasinya jadi lebih responsif, terasa lebih premium". Praktik ini sejalan dengan riset web.dev INP bahwa INP di bawah 200 ms berkorelasi positif dengan persepsi premium produk.

Apa yang Dipertahankan dari Framer Motion

Bukan berarti Framer Motion harus dibuang. Di halaman About Yuanita, ada scroll-linked storytelling animation dengan staggered children dan gesture-based reveal yang masih jauh lebih clean pakai library. Aturan praktis yang saya pakai sekarang di proyek client:

• Entry/exit animation sederhana: CSS @starting-style + view-transitions.
• Scroll-driven sederhana: CSS scroll-driven animations.
• Gesture, physics, chained complex: library JavaScript.

Pertanyaan Umum

Apakah @starting-style support di Safari?

Ya, sejak Safari 17.5 (Q2 2024). Berdasarkan data CrUX audience Indonesia per April 2026, Safari iOS 17+ coverage di atas 88 persen.

Bagaimana fallback untuk browser lama?

@starting-style gracefully degraded. Browser yang tidak support hanya menampilkan modal tanpa entry animation, fungsional tetap utuh tanpa error.

Apakah teknik ini berlaku untuk dropdown menu?

Ya. Saya pakai pendekatan sama untuk dropdown menu navbar di Yuanita's site. Kombinasi @starting-style + Popover API ganti Headless UI menu component, pangkas tambahan 12 KB.

Berapa lama belajar @starting-style untuk dev biasa?

Untuk dev yang sudah familiar CSS transition, paham konsepnya dalam 1-2 jam. Implementasi pertama biasanya butuh 1 hari termasuk testing fallback.

Apakah bisa kombinasi @starting-style dengan view-transitions-api?

Bisa, tapi hati-hati conflict. View Transitions handle cross-document transition, @starting-style untuk single-element entry. Pakai salah satu per use case, jangan stack untuk elemen yang sama.

Insight Aplikatif

Bukan setiap masalah UI butuh library. Sejak 2024, banyak fitur yang dulu butuh JS sudah jadi web platform native. Audit bundle sebelum lompat install library, dan ukur dampak ke metrik bisnis nyata (conversion, bukan cuma Lighthouse score).