Layar Pembuka Anggun & Tombol Buka Undangan
Menyambut tamu dengan sampul layar penuh bertuliskan nama tamu, lalu membuka lembaran isi undangan dengan transisi yang anggun saat tombol disentuh.
Menyambut tamu dengan sampul layar penuh bertuliskan nama tamu, lalu membuka lembaran isi undangan dengan transisi yang anggun saat tombol disentuh.
Tantangan & Kebutuhan Pengguna
Sebuah undangan pernikahan membutuhkan pemisahan pengalaman antara sampul luar (amplop) dan isi surat di dalamnya. Jika seluruh seksi langsung dimuat dalam satu halaman panjang, tamu dapat langsung menggulir melewati sapaan pembuka dan kehilangan momen seremonial saat menekan tombol 'Open Invitation'.
Membuka undangan digital harus menghadirkan sensasi fisik seperti membuka segel amplop sebelum isi ceritanya terbentang.
Solusi & Cara Kerja
Komponen `HomePage` membagi siklus hidup tampilan berdasarkan state boolean `isOpen`. Ketika `!isOpen`, halaman dirender di dalam wadah `h-screen overflow-y-scroll snap-y snap-mandatory` yang hanya berisi dua layar penuh: Seksi Hero dan Seksi Kartu Pembuka. Saat tombol `OPEN INVITATION` ditekan, handler menjalankan timer `600ms` untuk mereset posisi scroll jendela (`window.scrollTo({ top: 0, behavior: "instant" })`) sekaligus mengubah `isOpen` menjadi `true`, sementara `AnimatePresence mode="wait"` menangani animasi keluar-masuk antar-fase secara mulus.
Berikut adalah implementasi gerbang `AnimatePresence` dan sinkronisasi reset scroll pada `src/pages/HomePage.tsx`:
Detail & Hal yang Diperhatikan
- Pencegahan lompatan posisi scroll (Scroll Position Inheritance): Tanpa `window.scrollTo({ top: 0, behavior: "instant" })`, peramban dapat mempertahankan offset scroll dari Seksi 2 sehingga pengguna langsung mendarat di tengah Seksi 3 saat isi undangan terbuka.
- Isolasi kontainer snap: Properti `snap-y snap-mandatory` hanya dipasang pada wrapper `key="closed"` agar setelah undangan dibuka, pengguna dapat menggulir Seksi 3–7 secara bebas tanpa tersendat oleh titik henti paksa.
- Penyembunyian scrollbar lintas mesin: Dikombinasikan dengan aturan global `scrollbar-width: none` dan `::-webkit-scrollbar { display: none }` agar transisi antar-panel terlihat bersih seperti aplikasi mobile native.
Gunakan `behavior: "instant"` alih-alih `"smooth"` saat mereset scroll di tengah pergantian DOM agar animasi masuk pada seksi pertama tidak berbenturan dengan pergerakan scroll ke atas.