Motion.dev Untuk Membuat Animasi di React.JS Smooth dan Tetap Ringan Resource

Animasi di Website

Animasi untuk website banyak sekali ragamnya, biasanya merupakan kombinasi dari CSS dan JS untuk mencintipkan pergerakan yang smooth dan enak di pandang mata. Namun jika buat secara manual, tentu akan cukup buang-buang waktu dan tenaga. Di NPM ada banyak sekali thrid-party  yang menawarkan untuk membuat beragam animasi untuk website, dari beragam transisi, movement dan banyak sekali jenis animasi lainnya. Masalahnya, jika asal install thrid-party hanya untuk animasi, ditakutkan bundle yang tercipta akan terlalu besar jika asal-asalan comot, membuat web lebih lambat untuk diakses.

Motion.dev adalah salah thrid-party untuk menciptakan animasi yang smooth namun tetap ringan untuk website. Taglinenya adalah “Motion. A production-grade animation library for
React, JavaScript, and Vue.”. Motion.dev hadir utuk React dan Vue 2 framework javascript paling populer saat ini, dan hadir juga untuk pure javascript. Khusus untuk artikel ini, kita akan membahas seputar membuat animasi keren dengan Motion.dev.

Motion.dev Untuk React.js dan Ini Gratis

Instalasi

Proses install menggunakan npm dengan command sebagi berikut:

npm install motion

Untuk kemudian tinggal kita import komponennya di tempat yang membutuhkan.

Membuat Animasi di React Dengan Motion.dev

Untuk berikutnya kita perlu import component dari Motion.dev untuk di gunakan di tempat yang membutuhkan, karena dalam case ini kita bekerja di React Project, maka import dari motion/react.

import { motion } from "motion/react"
<motion.ul animate={{ rotate: 360 }} />

Kompenen <Motion /> adalah inti dari Motion for React. Ketika dirender, dia akan menjadi DOM komponen, seperti div, ul, li dan sebagainya, yang memiliki kemampuan untuk menjadi animasi.

Dalam kasus diatas, maka akan terender menjadi component <ul /> , jika ingin menjadikan div, maka codenya menjadi berikut

<motion.div animate={{ scale: 2, transition: { duration: 2 } }}/>

Saya ingin membuat div yang menjadi besar 2x lipat dengan waktu transisi 2ms, maka props yang perlu dikirim adalah seperti diatas.

Animasi yang Disupport Motion.dev

Hingga saat ini ada banyak animasi yang di support oleh Motion.dev akan saya bahas berdasarkan props yang di support di motion/react.

Disini kita bisa membagi animasi dari segi waktu menjadi 3, ketika mulai, di tengah-tengah dan akhir. Motion.dev sendiri support untuk memberikan animasi berdasarkan 3 waktu tersebut secara spesific.

Durasi animasi juga bisa kita pecah lagi berdasarkan 3 waktu diatas, atau bisa kita set secara sama.

Selain waktu, animasi juga bisa di trigger oleh aktifitas dari user, seperti scroll, click, hover, dragging, typing dan lainnya, motion.dev support untuk mengolah semua trigger dari user ini.

Hal penting lainnya adalah pergeraakan atau transisi, Motion.dev memberikan banyak opsi animasi yang bisa di pasangkan ke component yang membutuhkan, dan semua juga bisa dipisah-pisah berdasarkan pembagian waktu rendering, atau trigger manual dari user.

Untuk dokumentasi lengkapnya bisa cek di https://motion.dev/docs/react.

Bundle Size Motion.dev

Bagian ini merupakan salah satu kelebihan utama dari motion.dev , ukuran bundlenya yang kecil sehingga tetap ringan ketika di bawa ke production environtment. Ukurannya minifiednya sekitar ~156.8 KB dan versi gzipnya hanya ~51.2 KB di cek dari Bundlephobia. So ukurannya sangat kecil, hampir seukuran 1 buah gambar.  Bisa cek di https://bundlephobia.com/package/frame-motion.