Siapa di antara kita yang membombardir web portfolio kita dengan animasi memukau agar dilirik oleh HRD atau project manager? Front end kah? Back end kah? Semuanya? Pada kenyataannya semua developer (mungkin juga termasuk developer perumahan) menghendaki web portfolio mereka memiliki tampilan cantik dan manja. Hal ini tentunya disebabkan karena tampilanlah yang pertama kali dapat dinilai. Para back end sebenarnya tersadar bahwa tidak ada HRD yang dapat melihat betapa efisien dan elegannya kode di belakang layar kecuali jika mereka menaruh kode mereka di GitHub. Dan walaupun begitu siapa yang mau membaca ribuan baris kode dari puluhan pelamar.
Front-End : Gampang Tapi Ribet
Di artikel ini penulis tak akan membahas tentang front end vs backend karena sudah pernah dibahas sebelumnya. Artikel ini ditujukan bagi para back-end yang ingin memikat para klien atau recruiter di perusahaan (yang jika di LinkedIn mungkin disebut talent acquisition, head hunter, atau semacamnya). Selain itu, artikel ini juga ditujukan untuk front-end yang selalu mengeluh bahwa menjadi front-end itu gampang tapi kerjanya ribet karena harus mengurus setiap pixel yang terkadang bandel dan susah diatur.
Solusi Untuk Sejuta Permasalahan.
Kita cukupkan saja acara mengeluhnya dan langsung mencari solusi untuk permasalahan bagaimana caranya membuat tampilan web yang memukau tanpa harus repot-repot memikirkan gerakan setiap piksel animasi untuk web kita. Bagi front-end tentu sudah akrab dengan yang namanya Javascript dengan segala kelengkapan library-nya. Karena terlalu banyak, mereka kadang bingung untuk memilih. Berikut ini adalah daftar library Javascript yang dapat membantu front-end untuk mempercantik tampilan web yang sedang ditangani. Daftar ini juga bisa membantu back-end ketika jiwa ‘seni’ mereka sedikit terusik.
Three JS merupakan library animasi Javascript yang paling populer di antara yang lain dengan jumlah kontributor sebanyak lebih dari 9000. Tentu saja umur Three JS yang sudah 8 tahun turut menyumbang andil terhadap kepopulerannya. Menggunakan WebGL sebagai engine-nya Three JS merupakan andalan para 3D artist yang ingin memajang karyanya di web. Beberapa fitur andalan dari Three JS adalah efek anaglyphs, kamera perspektif dan orthographic, beberapa tools geometri seperti membentuk kubus, bola, dan plane. Kelemahan dari library ini adalah performanya yang dirasa kurang.
Instalasi :
npm install three
Anime JS menduduki tempat kedua sebagai Javascript library untuk animasi yang populer. Javascript library ini digadang-gadang menjadi pengganti dari Three JS karena performanya yang cepat. Anime JS berjalan lancar hampir di seluruh platform browser (Chrome, Firefox, Safari, Opera, Edge). Memang animasi yang tersedia hanya sebatas 2D tapi untuk kebanyakan website project, Anime JS sudah cukup untuk membuat pengunjung terkesan.
Instalasi :
npm install animejs
Particle JS merupakan library yang spesifik untuk membuat garis dan titik yang terhubung. Jika Anda pernah melihat template-template yang digunakan untuk menggambarkan kata ‘networking’, ‘neuron’, ‘connection’, dan sebagainya, Anda pasti bisa membayangkan apa yang dapat dilakukan oleh Particle JS. Jadi para front end tidak lagi bingung jika klien memberi mandat “Itu lho Mas, yang titik banyak ada garisnya bisa gerak-gerak sendiri.”
Instalasi :
npm install particlesjs
Sama seperti Particle JS, Scrollreveal merupakan library yang spesifik untuk tampilan suatu website. Scrollreveal menampilkan konten ketika user menscroll halaman. Library ini sangat berguna karena memang javascript tidak memiliki object event yang dapat memberi tahu bagian konten mana yang sedang dilihat oleh user.
Instalasi :
npm install scrollreveal
http://velocityjs.org/Library ini merupakan library yang cocok digunakan untuk UI/UX designer. Dengan Velocity JS kita dapat dengan mudah membuat animasi lewat HTML dan SVG. Library ini terbebas dari dependency jQuery walaupun menggunakan API yang sama dengan jQuery seperti $.animate().
Instalasi :
npm install velocity-animate
Popmotion JS adalah sebuah library yang dapat membantu front-end menciptakan animasi simpel tapi indah. Library ini dapat diintegrasikan langsung ke dalam framework javascript seperti React, React Native, ataupun Vue.
Instalasi :
npm install popmotion
Library ini mirip dengan Popmotion JS dalam hal simpel dan indah. Terlebih lagi, Mo JS cocok untuk digunakan oleh pemula karena hadir dengan tutorial dan demo. Walaupun begitu, Mo JS juga bisa digunakan untuk membuat aplikasi yang cukup rumit.
Instalasi :
npm install mo-js
Jika Anda melihat dunia dengan perspektif titik-titik polygon yang memiliki nilai angka mirip seperti properti dalam SVG, tentu anda akan menyukai library ini. Vivus JS merupakan library yang ringan, mudah digunakan, dan tidak memiliki dependency.
Instalasi :
npm install vivus
Greensock JS juga sering disebut GSAP (Greensock Animation Platform). Cepat dan efisien merupakan kelebihan yang dimiliki oleh Greensock JS. Library ini bisa berjalan hampir di semua browser.
Instalasi :
npm install gsap
****
Itu tadi 9 Javascript library untuk membuat animasi berbasis web yang paing populer hingga saat ini. Semua library tersebut sudah memiliki basis komunitas yang cukup di Github jadi kita tidak perlu khawatir terhadap error di masa mendatang.
