Mengenal React-motion

React.js adalah salah satu teknologi client-side javascript yang sedang populer saat ini.Teknologi client-side ini dibuat untuk memudahkan web developer membangun user interface yang lebih mudah dikelola.

React Js memiliki banyak library yang membantu kita dalam membuat suatu website. Salah satu librarynya, yaitu React Motion. Dengan react motion kita dapat membuat animasi pada suatu component. Didalam react-motion terdapat beberapa API. Namun yang paling dasar dalam react-motion adalah Spring dan Motion.

Spring

Spring adalah fungsi yang paling sederhana didalam react-motion. Hal ini memungkinkan kita untuk membuat transisi dari defaultValue ke endValue. Atau bisa dikatakan dengan spring kita dapat membuat perubahan style suatu component.

Motion

Motion adalah component yang digunakan untuk membuat animasi / pergerakan component pada react.

Untuk memahami penggunaan spring dan motion, saya akan mencoba menjelaskan dengan membuat animasi sederhana.

Kita akan membuat animasi sederhana seperti ini.

Pada tulisan ini saya menggunakan project https://github.com/StephenGrider/ReduxSimpleStarter . Untuk itu langkah pertama, clone repository tersebut. Karena pada tulisan ini akan fokus kepada react-motion. Untuk konfigurasi project silahkan ikuti repository tersebut.

Untuk memulai menggunakan react-motion, kita harus menginstall terlebih dahulu. Dengan menggunakan node package manager,

npm install — save react-motion

Penjelasan code

Untuk menggunakan motion dan Spring implementasinya seperti code diatas. Pada Component Motion kita memberikan style untuk animasi dengan menggunakan spring. Ada tiga style yang akan diberikan,

  1. Radius
  2. opacity
  3. scale

Spring berjalan ketika state open = true. Spring akan merubah value opacity dari 0 menjadi 1 secara perlahan. Begitu juga pada scale dan radius.

Lalu kita harus mengambil currentStyles yang sedang aktif untuk diberikan kepada component Kotak. Seperti pada code berikut

Setelah itu kita akan memberikan event handling pada button dan juga inisialisasi state awal.

Fungsi inisialisasi state awal adalah untuk menentukan ketika state open = false, animasi tidak berjalan. Namun ketika open = true maka animasi berjalan.

FULL CODE

Dari code tersebut akan dihasilkan animasi seperti

Sebenarnya pada react-motion tidak hanya ada Spring dan Motion. Masih ada library lain seperti StaggeredMotion dan TransitionMotion. Dan juga masih banyak animasi yang dapat dihasilkan. Pada tulisan selanjutnya saya akan mencoba membahas mengenai dua library tersebut.

Masih banyak blog atau artikel lain yang membahas mengenai react-motion. Jadi silahkan cari sumber lain sebanyak-banyak nya untuk mendalami mengenai react-motion. :D

Semoga tulisan ini bermanfaat, jika ada kesalahan, saran dan kritik silahkan berikan komentar pada tulisan ini.

Terima kasih :D