React Academy · Pelajaran

Animasi Gestur: Hover, Tap & Seret

Gunakan prop whileHover, whileTap, dan drag untuk menganimasikan komponen berdasarkan gestur pengguna.

Animasi Gestur: Hover, Tap & Seret adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Ikhtisar Properti Gestur

Properti gestur Framer Motion menganimasikan komponen sebagai respons terhadap masukan pengguna tanpa penangan kejadian JavaScript. Properti utamanya adalah whileHover, whileTap, whileDrag, dan whileFocus.

whileHover

Menentukan keadaan animasi saat kursor diarahkan ke elemen. Keadaan tersebut kembali secara otomatis saat kursor meninggalkan elemen.

<motion.button
  whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
  Hover me
</motion.button>

whileTap

Menentukan keadaan animasi saat elemen ditekan. Sangat cocok untuk memberikan umpan balik saat tombol ditekan.

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Click
</motion.button>

whileFocus

Menganimasikan elemen saat menerima fokus papan ketik — sangat berguna untuk indikator fokus yang mudah diakses.

<motion.input
  whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
  transition={{ duration: 0.2 }}
/>

Mengaktifkan Seret

Tambahkan properti drag agar elemen dapat diseret. Tetapkan ke true, 'x', atau 'y' untuk membatasi sumbu.

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
  style={{ cursor: 'grab' }}
>
  Drag me
</motion.div>

dragConstraints dengan Ref

Batasi seretan ke elemen wadah menggunakan ref alih-alih nilai piksel — elemen yang dapat diseret tidak dapat meninggalkan wadah.

const constraintsRef = useRef(null);

<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
  <motion.div
    drag
    dragConstraints={constraintsRef}
    style={{ width: 80, height: 80, background: '#4f46e5' }}
  />
</div>

dragElastic

dragElastic mengatur seberapa jauh elemen dapat diseret melewati batasannya (0 = tanpa elastisitas, 1 = penuh).

<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
  dragElastic={0.2} // slight rubber-band effect
/>

dragSnapToOrigin

Menetapkan dragSnapToOrigin membuat elemen memantul kembali ke posisi awalnya saat dilepaskan.

<motion.div
  drag
  dragSnapToOrigin
  dragElastic={0.5}
  style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>

Kejadian Pan

Gunakan onPanStart, onPan, dan onPanEnd untuk melacak posisi kursor selama gestur pan tanpa mengaktifkan mode seret penuh.

<motion.div
  onPan={(event, info) => {
    console.log('Point:', info.point.x, info.point.y);
    console.log('Delta:', info.delta.x, info.delta.y);
  }}
/>

Kejadian Seret

Dengarkan kejadian siklus hidup seret: onDragStart, onDrag, dan onDragEnd. Objek info berisi kecepatan dan pergeseran.

<motion.div
  drag="x"
  onDragEnd={(event, info) => {
    if (info.velocity.x > 500) onSwipeRight();
    if (info.velocity.x < -500) onSwipeLeft();
  }}
/>

Pola Geser Kartu

Terapkan geser ala Tinder menggunakan kecepatan seret untuk mendeteksi arah geseran saat dilepaskan.

function SwipeCard({ onSwipe }) {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.7}
      onDragEnd={(_, info) => {
        if (Math.abs(info.velocity.x) > 400) {
          onSwipe(info.velocity.x > 0 ? 'right' : 'left');
        }
      }}
    />
  );
}

Pemeriksaan Singkat

Properti Framer Motion mana yang membuat elemen yang diseret kembali ke posisi awalnya saat dilepaskan?

Rangkuman

Gunakan whileHover, whileTap, dan whileFocus untuk animasi keadaan interaktif. Tambahkan drag untuk elemen yang dapat diseret, batasi dengan dragConstraints, dan gunakan kecepatan onDragEnd untuk mendeteksi geseran.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Animasi Gestur: Hover, Tap & Seret” gratis?

Ya — teks lengkap “Animasi Gestur: Hover, Tap & Seret” 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 “Animasi Gestur: Hover, Tap & Seret”?

Gunakan prop whileHover, whileTap, dan drag untuk menganimasikan komponen berdasarkan gestur pengguna. 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 3 dari 4.

Berapa lama pelajaran “Animasi Gestur: Hover, Tap & Seret” 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