Cara Marketer Indonesia Pasang CSS animation-composition di Next.js untuk Komposisi Hover & Idle Motion, Pangkas 18 KB GSAP dan Hilangkan Konflik Transform di 2026

TL;DR: CSS animation-composition memungkinkan dua animasi pada satu elemen (idle spin + hover scale, misalnya) berjalan tanpa saling menimpa. Cukup tambah animation-composition: add di CSS, tidak perlu library JavaScript. Dalam praktik di Atmo LMS, migrasi dari GSAP ke animation-composition memangkas 18 KB bundle dan menjaga 60 fps di halaman dashboard padat motion. Per Mei 2026, properti ini stabil di Chrome, Edge, dan Safari, masih perlu fallback untuk Firefox.

Banyak landing page personal brand pakai dua animasi pada elemen hero: lingkaran gradien yang berputar pelan terus-menerus, lalu hover memperbesar elemen. Tanpa orkestrasi tepat, animasi kedua selalu menimpa animasi pertama, hero terasa kaku. Pendekatan lazim selama bertahun-tahun adalah menarik library GSAP atau Framer Motion hanya untuk menyelesaikan kasus ini.

Per 2024, CSS animation-composition sudah stabil di Chrome, Edge, dan Safari. Properti ini menyelesaikan kasus komposisi tanpa JavaScript. Dalam beberapa proyek terakhir, saya melihat developer marketer di Indonesia masih ragu memakainya karena alasan kompatibilitas. Padahal dengan fallback Firefox sederhana, properti ini sudah aman dipakai produksi.

Masalah Tipikal: Dua Animasi Saling Bunuh

Pertimbangkan kasus hero card produk. Card berputar perlahan untuk menarik perhatian, lalu hover memperbesar 1,05x untuk feedback interaktif. Tanpa animation-composition, CSS standar selalu memakai nilai animasi terakhir, sehingga rotasi berhenti saat hover. Solusi lama: ganti seluruh animasi dengan JavaScript via GSAP atau Framer Motion, biaya bundle 15 sampai 25 KB minimal. Untuk halaman yang LCP-nya sudah ketat, biaya ini terasa.

Setup di Next.js 15 App Router

Tambah CSS di app/globals.css atau modul komponen:

Kode lengkap:

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hover-scale { to { transform: scale(1.05); } }

.hero-card {
  animation: spin 8s linear infinite;
  animation-composition: add;
  will-change: transform;
}
.hero-card:hover {
  animation: spin 8s linear infinite, hover-scale 200ms ease forwards;
}

Untuk Firefox yang belum dukung properti ini, tambahkan feature query:

@supports not (animation-composition: add) {
  .hero-card:hover { animation: hover-scale 200ms ease forwards; }
}

Studi Kasus: Atmo LMS Hero Dashboard

Saat memperbarui Atmo LMS pada Maret 2026, dashboard kursus punya 8 kartu modul dengan rotasi gradien lambat. Hover memperbesar dan menambah shadow. Implementasi awal pakai GSAP timeline yang mengontrol kedua animasi. Bundle GSAP plus plugin 22 KB minified. Setelah migrasi ke animation-composition murni CSS, bundle berkurang 18 KB, LCP halaman dashboard turun dari 2,1 detik ke 1,7 detik di Moto G4 jaringan 4G simulasi. Lihat juga praktik animasi modern lain di artikel CSS Scroll-Driven Animations di Next.js dan CSS transition-behavior untuk Modal.

Pertanyaan Umum

Apakah animation-composition mengganti GSAP secara total?

Tidak. GSAP masih unggul untuk timeline kompleks dan scrub interaktif. Untuk komposisi sederhana 2 sampai 3 animasi, animation-composition cukup.

Bagaimana dengan Reduced Motion?

Selalu bungkus dalam @media (prefers-reduced-motion: no-preference). Pengguna yang minta reduced motion harus dihormati.

Bisa dipakai dengan transform 3D?

Bisa untuk translate, rotate, dan scale. Untuk matrix kustom, hasilnya bisa tidak terduga, uji manual.

Apakah memengaruhi Web Vitals?

Penghapusan library JavaScript menurunkan TBT dan ukuran bundle. INP cenderung membaik karena thread utama lebih lega.

Kesimpulan Aplikatif

Audit komponen hero dan card di Next.js Anda. Identifikasi yang punya dua atau lebih animasi bertumpuk. Pindahkan ke animation-composition jika tidak butuh timeline kompleks. Targetkan pemangkasan 15 sampai 25 KB JavaScript per migrasi pertama, lalu ukur ulang Web Vitals.