Cara Membuat Animasi Masuk dan Keluar untuk Komponen React Menggunakan Framer Motion

Menganimasikan komponen React saat memasuki atau meninggalkan layar bisa menjadi suatu tantangan. Ini karena, ketika 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.

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 melakukannya instal Node.js dan npm (Node Package Manager) di mesin Anda jika Anda belum.

Setelah Anda menginstal dependensi ini, Anda bisa buat proyek React baru menggunakan Vite dengan menjalankan perintah benang vite di terminal Anda.

vite benang

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.

benang mulai

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.

impor { gerak } dari"gerakan-pembingkai";

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.

impor { gerak, AnimatePresence } dari"gerakan-pembingkai"
fungsiAplikasi() {
kembali (
 <>

 awal={{ X: -100, kegelapan: 0 }}
 animasi={{ X: 0, kegelapan: 1 }}
 keluar={{ X: -100, kegelapan: 0 }}
 >
Terkirim!</p>
 </motion.div>

 </>
 )
}

Komponen gerak memungkinkan Anda menganimasikan elemen div yang berisi teks "Terkirim!".

Itu awal, menghidupkan, Dan 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 saat memasuki layar, dalam hal ini berpindah dari x posisi -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:

impor { AnimatePresence, gerakan } dari"gerakan-pembingkai";
impor { status penggunaan } dari"reaksi";
fungsiAplikasi() {
const [isVisible, setIsVisible] = useState(BENAR);
const toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
kembali (
 <>

 {terlihat && ( <motion.div
 awal={{ X: -100, kegelapan: 0 }}
 animasi={{ X: 0, kegelapan: 1 }}
 keluar={{ X: -100, kegelapan: 0 }}
 >
Terkirim!</p>
 </motion.div>)}
 </AnimatePresence>

 Memberitahu
 </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.

Kamu 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.

impor { gerak, easyInOut } dari"gerakan-pembingkai";

Kemudian tambahkan ke objek transisi di komponen gerak:

 awal={{ X: -100, kegelapan: 0 }}
 animasi={{ X: 0, kegelapan: 1, transisi: { durasi: 0.5, kemudahan: easyInOut } }}
 keluar={{ X: -100, kegelapan: 0, transisi: { durasi: 0.5, kemudahan: easyInOut } }}
>
Terkirim!</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.