React Academy · Pelajaran

Komponen Motion & Animasi Dasar

Ganti div dengan motion.div dan gunakan prop animate, initial, serta exit untuk animasi sederhana.

Komponen Motion & Animasi Dasar adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Framer Motion

Framer Motion adalah pustaka animasi React. Ganti elemen HTML dengan padanan motion.* untuk menambahkan animasi deklaratif melalui properti, bukan bingkai kunci CSS.

Instalasi

Instal Framer Motion dan impor motion darinya.

npm install framer-motion

import { motion } from 'framer-motion';

Animasi Pertama Anda

Ganti <div> dengan <motion.div> dan tambahkan properti initial, animate, serta transition.

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
>
  Hello, Framer Motion!
</motion.div>

Properti initial

initial menentukan keadaan awal animasi — posisi elemen sebelum dianimasikan menuju animate.

// Fade in from left
<motion.div
  initial={{ opacity: 0, x: -50 }}
  animate={{ opacity: 1, x: 0 }}
/>

// Scale up from center
<motion.button
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
/>

Properti animate

animate menentukan keadaan target. Framer Motion melakukan interpolasi antara initial dan animate menggunakan fisika pegas atau pelonggaran yang ditentukan.

<motion.h1
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, color: '#4f46e5' }}
  transition={{ duration: 0.6, ease: 'easeOut' }}
>
  Welcome
</motion.h1>

Opsi Transition

Properti transition mengatur cara animasi bergerak: duration, ease, delay, type ('spring' | 'tween' | 'inertia').

transition={{
  type: 'spring',
  stiffness: 300,
  damping: 20,
  delay: 0.2,
}}

Bingkai Kunci dalam animate

Berikan array ke nilai animasi apa pun untuk membuat animasi bingkai kunci yang melewati beberapa keadaan.

<motion.div
  animate={{ x: [0, 30, 0] }}
  transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>

Keadaan Hover dan Tap

whileHover dan whileTap menentukan keadaan animasi untuk interaksi saat kursor diarahkan dan saat ditekan, lalu kembali secara otomatis ketika gestur berakhir.

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
  whileTap={{ scale: 0.95 }}
  style={{ backgroundColor: '#6366f1' }}
>
  Press me
</motion.button>

Menganimasikan Saat Menggulir dengan inView

Gunakan properti whileInView untuk memicu animasi saat elemen masuk ke area pandang.

<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.5 }}
>
  <h2>Revealed on scroll</h2>
</motion.section>

Properti exit dengan AnimatePresence

exit menentukan animasi saat komponen dilepas dari pohon. Properti ini hanya berfungsi jika komponen dibungkus dalam <AnimatePresence>.

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
    />
  )}
</AnimatePresence>

useAnimate untuk Kontrol Imperatif

useAnimate() mengembalikan ref scope dan fungsi animate untuk mengendalikan animasi secara terprogram di luar sistem properti deklaratif.

import { useAnimate } from 'framer-motion';

function ShakeButton() {
  const [scope, animate] = useAnimate();
  const handleClick = async () => {
    await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
  };
  return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}

Mengurangi Gerakan

Hormati preferensi pengguna untuk mengurangi gerakan dengan hook useReducedMotion().

import { useReducedMotion } from 'framer-motion';

function AnimatedCard() {
  const shouldReduce = useReducedMotion();
  return (
    <motion.div
      animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
    />
  );
}

Pemeriksaan Singkat

Properti Framer Motion mana yang menentukan keadaan animasi yang harus dicapai komponen (targetnya)?

Rangkuman

Ganti elemen HTML dengan padanan motion.*. Gunakan initial untuk keadaan awal, animate untuk target, transition untuk pengaturan waktu, whileHover/whileTap untuk gestur, dan whileInView untuk animasi yang dipicu saat menggulir.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Motion & Animasi Dasar” gratis?

Ya — teks lengkap “Komponen Motion & Animasi Dasar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen Motion & Animasi Dasar”?

Ganti div dengan motion.div dan gunakan prop animate, initial, serta exit untuk animasi sederhana. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Komponen Motion & Animasi Dasar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy