Animasi yang lemot hampir selalu disebabkan oleh properti yang memicu layout ulang — seperti width, height, margin, atau top. Setiap frame, browser harus menghitung ulang posisi semua elemen. Mahal.

Aturan emasnya: animasikan hanya transform dan opacity. Keduanya dijalankan oleh GPU di layer compositor, tanpa menyentuh layout sama sekali. translateY(-4px) selalu lebih murah dari margin-top: -4px.

/* lambat: memicu layout */
.card:hover { margin-top: -4px; }
/* cepat: hanya compositor */
.card:hover { transform: translateY(-4px); }

Untuk animasi saat scroll, jangan pakai event scroll mentah — pakai IntersectionObserver. Browser yang mengatur kapan callback dipanggil, jauh lebih efisien daripada menghitung posisi setiap frame.

Dan jangan lupakan aksesibilitas: bungkus semua animasi non-esensial dalam @media (prefers-reduced-motion: reduce) dan matikan. Sebagian pengguna benar-benar butuh website yang diam.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Website ini sendiri memakai semua teknik di atas: reveal saat scroll, hover lift, dan semuanya mati total untuk pengguna reduced motion. Cepat itu fitur.