Cara Membuat Animasi Masuk dan Keluar untuk Komponen React Menggunakan Framer Motion
Table of content:
Menganimasikan komponen React saat memasuki atau meninggalkan layar bisa menjadi suatu tantangan. Ini karena, saat Anda menyembunyikan sebuah komponen, React akan menghapusnya dari DOM, yang membuatnya tidak tersedia untuk animasi. Saat Anda menampilkan komponen itu lagi, React akan menambahkannya kembali ke DOM yang dapat mengakibatkan munculnya tiba-tiba tanpa animasi.
Anda dapat mengatasi masalah ini dengan pustaka animasi seperti Framer Motion.
Apa itu Framer Motion?
Framer Motion adalah pustaka animasi siap produksi untuk React. Ini menyediakan berbagai komponen, hook, keyframe, dan fungsi easing khusus untuk membuat dan mengontrol animasi.
Baca Juga:
Salah satu keuntungan dari Framer Motion adalah membuatnya mudah untuk membuat animasi yang halus dan lancar tanpa perlu menulis banyak kode JavaScript atau menghitung perhitungan untuk setiap transisi.
Ini juga memiliki sistem acara, yang dapat Anda gunakan untuk memicu animasi berdasarkan masukan pengguna seperti klik tombol dan gerakan, membuat antarmuka interaktif dan dinamis yang terasa responsif.
Untuk mendemonstrasikan cara menggunakan Framer Motion di React, Anda akan menganimasikan komponen yang masuk dan keluar layar saat Anda mengklik sebuah tombol.
Membuat Proyek Bereaksi
Untuk membuat proyek React, Anda harus menginstal Node.js dan npm (Node Package Manager) di mesin Anda jika belum.
Setelah Anda menginstal dependensi ini, Anda dapat membuat proyek React baru menggunakan Vite dengan menjalankan perintah yarn vite di terminal Anda.
yarn vite
Perintah ini akan membuat folder baru dengan semua file dan dependensi yang diperlukan sudah diinstal sebelumnya. Arahkan ke folder dan mulai server pengembangan dengan perintah mulai benang.
yarn start Memasang Framer Motion di React
Instal Framer Motion dengan menjalankan perintah ini:
npm install framer-motion
Perintah ini akan menambahkan Framer Motion sebagai ketergantungan pada proyek Anda.
Menghidupkan Komponen
Untuk menganimasikan komponen saat memasuki dan meninggalkan layar di React menggunakan Framer Motion, Anda perlu membungkusnya dalam komponen gerak.
Komponen gerak menyediakan satu set properti untuk menganimasikan masuk dan keluar komponen. Anda dapat menggunakan properti awal, animasi, dan keluar untuk mengontrol visibilitas dan posisinya.
Untuk melihatnya beraksi, tambahkan kode berikut di bagian atas App.jsx untuk mengimpor komponen motion dari framer-motion.
import { motion } from "framer-motion";
Selanjutnya, buat komponen yang ingin Anda animasikan dengan membungkusnya dengan komponen gerak. Contoh ini menggunakan elemen div tetapi Anda dapat menggunakan elemen lain yang Anda inginkan seperti button, li, dan p.
import { motion, AnimatePresence } from "framer-motion"function App() {
return (
<>
<AnimatePresence>
<motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -100, opacity: 0 }}
>
<p>Sent!</p>
</motion.div>
<AnimatePresence>
</>
)
}
Komponen gerak memungkinkan Anda menganimasikan elemen div yang berisi teks “Terkirim!”.
Itu awal, menghidupkanDan KELUAR properti komponen gerak menentukan animasi masuk dan keluar komponen. Saat komponen pertama kali dirender, komponen akan dimulai dengan posisi x -100 (di luar layar ke kiri) dan opacity 0 dan menjadi tidak terlihat.
Properti animate menentukan bagaimana komponen harus dianimasikan ketika memasuki layar, dalam hal ini bergerak dari posisi x -100 ke posisi x 0 (geser dari kiri) dan secara bertahap memudar menjadi opasitas 1 dan menjadi sepenuhnya bisa dilihat.
Terakhir, properti exit menentukan bagaimana komponen harus dianimasikan saat Anda menghapusnya dari layar. Dalam hal ini, komponen akan meluncur dari layar ke kiri dengan posisi x -100 dan secara bertahap menghilang ke opasitas 0.
Anda juga perlu membungkus komponen motion dengan komponen AnimatePresence dari framer-motion ke komponen animate saat Anda menghapusnya dari pohon React DOM.
Sekarang setelah Anda menentukan animasi masuk dan keluar, Anda dapat menambahkan tombol untuk memicu animasi. Berikut adalah komponen yang dimodifikasi dengan tombol:
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";function App() {
const [isVisible, setIsVisible] = useState(true);
const toggleVisibility = () => {
setIsVisible(!isVisible);
};
return (
<>
<AnimatePresence>
{isVisible && ( <motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -100, opacity: 0 }}
>
<p>Sent!</p>
</motion.div>)}
</AnimatePresence>
<button onClick={toggleVisibility}>
Notify
</button>
</>
)
}
Kode yang diperbarui ini menambahkan variabel status yang disebut isVisible menggunakan hook useState. Variabel ini melacak apakah komponen harus terlihat. Fungsi toggleVisibility mengubah nilai isVisible antara benar dan salah saat Anda mengeklik tombol.
Anda sekarang merender komponen secara kondisional tergantung pada nilai isVisible. Jika isVisible benar, komponen gerakan akan dirender dengan animasi pintu masuk.
Terakhir, tambahkan event handler onClick ke tombol yang memanggil fungsi toggleVisibility, memperbarui status isVisible, dan memicu animasi masuk atau keluar dari komponen gerak.
Menambahkan Fungsi Pelonggaran
Fungsi easing mengontrol tingkat perubahan animasi dari waktu ke waktu. Ini menentukan waktu animasi dengan menentukan bagaimana animasi harus dipercepat atau diperlambat saat berlangsung. Tanpa fungsi easing, animasi dapat dirender terlalu cepat.
Framer Motion menyediakan beberapa fungsi easing untuk dipilih termasuk easeInOut. Impor di bagian atas App.jsx dari framer-motion untuk menggunakannya.
import { motion, easeInOut } from "framer-motion";
Kemudian tambahkan ke objek transisi di komponen gerak:
<motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1, transition: { duration: 0.5, ease: easeInOut } }}
exit={{ x: -100, opacity: 0, transition: { duration: 0.5, ease: easeInOut } }}
>
<p>Sent!</p>
</motion.div>
Properti durasi menentukan berapa lama animasi harus berjalan.
Gunakan CSS Biasa untuk Animasi Sederhana
Masih banyak lagi yang dapat Anda lakukan dengan Framer Motion termasuk animasi 3D. Namun, Anda tidak selalu membutuhkan perpustakaan untuk membuat animasi. Untuk animasi sederhana seperti transisi hover, Anda selalu dapat menggunakan CSS biasa.
Artikel Terkait
