CSS Animation vs Framer Motion - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Animasi di Web: Pilih CSS atau Framer Motion?

Animasi itu bikin UI jadi lebih hidup dan interaktif. Tapi, kalau pakai React, kita harus pilih metode yang paling efektif. Dua pilihan paling populer adalah CSS Animation dan Framer Motion. Jadi, mana yang lebih baik? Yuk, kita bahas!

2. CSS Animation: Ringan tapi Terbatas

CSS Animation adalah metode animasi langsung di CSS tanpa perlu library tambahan. Ini cocok buat animasi simpel seperti fade-in, slide, atau hover effect.

Contoh CSS Animation:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.box {
  animation: fadeIn 1s ease-in-out;
}

Lalu, kita pakai di React:

<div className="box">Halo, Dunia!</div>

Kelebihan CSS Animation:

• Ringan & Cepat: Nggak butuh library tambahan.
• Mudah Digunakan: Bisa langsung dipakai di file CSS.
• Performanya Bagus: Didukung oleh browser langsung dengan optimasi GPU.

Kekurangan CSS Animation:

• Kurang Interaktif: Sulit menangani animasi berdasarkan state.
• Kompleks untuk Animasi Rumit: Jika butuh banyak step, kode CSS bisa berantakan.
• Tidak Dinamis: Sulit mengubah animasi berdasarkan logika React.

3. Framer Motion: Fleksibel & Dinamis

Framer Motion adalah library animasi khusus untuk React yang lebih interaktif dan dinamis dibanding CSS Animation.

Contoh Animasi dengan Framer Motion:

npm install framer-motion

Lalu, di dalam React:

import { motion } from "framer-motion";

const Box = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Halo, Dunia!
    </motion.div>
  );
};

Kelebihan Framer Motion:

• Reaktif & Dinamis: Bisa mengikuti state React.
• Kode Lebih Bersih: Langsung ditulis di dalam komponen.
• Fitur Lanjutan: Bisa bikin animasi kompleks seperti drag, gestures, dan transitions.

Kekurangan Framer Motion:

• Butuh Library Tambahan: Harus install framer-motion.
• Sedikit Lebih Berat: Dibanding CSS Animation, performanya bisa sedikit lebih lambat jika tidak dioptimasi.

4. Jadi, Mana yang Harus Dipilih?

Fitur	CSS Animation	Framer Motion
Performa	Cepat	Sedikit lebih berat
Kemudahan	Mudah	Perlu belajar
Interaktivitas	Terbatas	Lebih fleksibel
Dinamis	Sulit diubah lewat state	Bisa berubah dengan state
Kompleksitas	Sulit untuk animasi kompleks	Mudah untuk animasi canggih

Kesimpulan:

• Kalau cuma butuh animasi simpel, gunakan CSS Animation.
• Kalau butuh animasi interaktif & dinamis, gunakan Framer Motion.

Jadi, pilih yang sesuai kebutuhan proyekmu. Kalau mau UI yang interaktif dan responsif, Framer Motion bisa jadi pilihan terbaik!