Animasi Mengalir Lembut Mengikuti Gerakan Jari | Interactive Wedding Invitation

Tantangan & Kebutuhan Pengguna

Animasi statis yang hanya berputar sekali saat elemen muncul di layar membuat pengalaman membaca undangan terasa pasif. Dibutuhkan koreografi visual layaknya majalah digital interaktif di mana foto pasangan membesar atau menyusut secara proporsional, sudut bingkai melengkung bertahap, serta garis-garis penuntun vertikal dan horizontal menggambar dirinya sendiri mengikuti seberapa jauh jari pengguna menggeser layar.

Posisi scroll menentukan ke mana elemen harus bergerak, tetapi redaman pegaslah yang membuat pergerakan digital terasa memiliki bobot fisik.

Solusi & Cara Kerja

Setiap seksi dari `Section3` hingga `Section7` di `HomePage.tsx` mendaftarkan `ref` ke hook `useScroll` dengan konfigurasi `offset` viewport yang spesifik (seperti `["start end", "center center"]` atau `["start 1.8", "end 0.2"]`). Nilai `scrollYProgress` (0 hingga 1) dipetakan secara deklaratif melalui `useTransform` ke berbagai properti visual, lalu dialirkan ke dalam `useSpring` dengan parameter `stiffness` dan `damping` terukur. Untuk garis dekoratif, pertumbuhan digerakkan oleh properti komposit `scaleY` dan `scaleX` dengan titik tumpu `originY: 0` dan `originX: 1`.

Detail & Hal yang Diperhatikan

Pencegahan flickering pada WebKit/Safari mobile: Perubahan `scale` bersamaan dengan `borderRadius` dan `overflow: hidden` sering memicu kedipan tekstur; diatasi dengan memaksa layer GPU menggunakan `translateZ: 0`, `backfaceVisibility: "hidden"`, dan `willChange: "transform"`.
Zero-Reflow Line Drawing: Garis vertikal dan horizontal tidak dianimasikan menggunakan `height` atau `width` yang membebani CPU layout, melainkan `scaleY` dan `scaleX` di dalam kontainer `overflow-hidden`.
Penyelarasan rentang waktu (staggered scroll ranges): Pada `Section6`, garis vertikal kedua (`[0.4, 0.85]`) dan garis horizontal (`[0.6, 0.95]`) berbagi satu `scrollYProgress2` yang sama namun dengan rentang input berbeda sehingga tampak menyambung secara berurutan.

Hindari penggunaan nilai stiffness di bawah 60 pada animasi gambar beresolusi besar karena pantulan pegas yang terlalu lambat akan terasa tertinggal jauh saat pengguna melakukan fast-scroll.

Tantangan & Kebutuhan Pengguna

Posisi scroll menentukan ke mana elemen harus bergerak, tetapi redaman pegaslah yang membuat pergerakan digital terasa memiliki bobot fisik.

Solusi & Cara Kerja

Detail & Hal yang Diperhatikan

Pencegahan flickering pada WebKit/Safari mobile: Perubahan `scale` bersamaan dengan `borderRadius` dan `overflow: hidden` sering memicu kedipan tekstur; diatasi dengan memaksa layer GPU menggunakan `translateZ: 0`, `backfaceVisibility: "hidden"`, dan `willChange: "transform"`.
Zero-Reflow Line Drawing: Garis vertikal dan horizontal tidak dianimasikan menggunakan `height` atau `width` yang membebani CPU layout, melainkan `scaleY` dan `scaleX` di dalam kontainer `overflow-hidden`.
Penyelarasan rentang waktu (staggered scroll ranges): Pada `Section6`, garis vertikal kedua (`[0.4, 0.85]`) dan garis horizontal (`[0.6, 0.95]`) berbagi satu `scrollYProgress2` yang sama namun dengan rentang input berbeda sehingga tampak menyambung secara berurutan.

Hindari penggunaan nilai stiffness di bawah 60 pada animasi gambar beresolusi besar karena pantulan pegas yang terlalu lambat akan terasa tertinggal jauh saat pengguna melakukan fast-scroll.