Paling depan. Mudah Tapi Rumit
Pada artikel kali ini penulis tidak akan membahas front end vs backend karena sudah pernah dibahas sebelumnya. Artikel ini ditujukan untuk back-end yang ingin menarik klien atau perekrut di perusahaan (yang kalau di LinkedIn mungkin disebut talent acquisition, head hunter, atau sejenisnya). Selain itu, artikel ini juga ditujukan untuk para front-end yang selalu mengeluh menjadi front-end itu mudah tetapi pekerjaannya rumit karena harus mengatur setiap piksel yang kadang membandel dan sulit diatur.
Solusi dari sejuta masalah
Kita cukup berhenti mengeluh dan segera mencari solusi dari masalah bagaimana membuat tampilan web yang memukau tanpa harus pusing memikirkan pergerakan setiap piksel animasi untuk web kita. Untuk front-end tentunya sudah tidak asing lagi dengan yang namanya Javascript dengan segala perlengkapan librarynya. Karena terlalu banyak, mereka terkadang bingung untuk memilih. Berikut ini adalah daftar library Javascript yang dapat membantu front end untuk mempercantik tampilan web yang sedang dituju. Daftar ini juga bisa membantu back-end ketika jiwa 'seni' mereka sedikit terganggu
Tiga JS
Three JS merupakan library animasi Javascript yang paling populer diantara yang lainnya dengan total lebih dari 9000 kontributor. Tentu saja, usia Three JS yang masih 8 tahun juga turut menyumbang kepopulerannya. Menggunakan WebGL sebagai engine-nya, Three JS menjadi andalan seniman 3D yang ingin menampilkan karyanya di web. Beberapa fitur andalan Three JS adalah efek anaglyphs, perspektif dan kamera orthographic, beberapa alat geometris seperti membentuk kubus, bola, dan bidang. Kelemahan perpustakaan ini adalah kinerjanya yang buruk
Instalasi
npm instal tiga
Anime JS
Anime JS menempati urutan kedua sebagai perpustakaan Javascript paling populer untuk animasi. Library Javascript ini diharapkan bisa menjadi pengganti Three JS karena performanya yang cepat. Anime JS berjalan lancar di hampir semua platform browser (Chrome, Firefox, Safari, Opera, Edge). Memang, animasi yang tersedia terbatas pada 2D, tetapi untuk sebagian besar proyek situs web, Anime JS sudah cukup untuk mengesankan pengunjung
Instalasi
npm instal animejs
Partikel JS
Partikel JS adalah perpustakaan khusus untuk membuat garis dan titik yang terhubung. Jika Anda pernah melihat template yang digunakan untuk mendeskripsikan kata 'networking', 'neuron', 'connection', dll., Anda pasti bisa membayangkan apa yang bisa dilakukan Particle JS. Jadi ujung depan tidak bingung lagi jika klien mengamanatkan "Itu saja, titik-titik yang banyak memiliki garis yang dapat bergerak sendiri. ”
Instalasi
npm instal partikeljs
Scrollreveal JS
Sama seperti Particle JS, Scrollreveal adalah library khusus untuk tampilan website. Scrollreveal menampilkan konten saat pengguna menggulir halaman. Library ini sangat berguna karena javascript tidak memiliki objek event yang dapat mengetahui bagian konten mana yang sedang dilihat oleh pengguna
Instalasi
npm instal scrollreveal
Kecepatan JS
http. //kecepatanjs. org/Library adalah library yang cocok untuk desainer UI/UX. Dengan Velocity JS kita dapat dengan mudah membuat animasi melalui HTML dan SVG. Pustaka ini bebas dari dependensi jQuery meskipun menggunakan API yang sama dengan jQuery seperti $. menghidupkan()
Instalasi
npm instal kecepatan-animasi
Popmotion JS
Popmotion JS adalah perpustakaan yang dapat membantu front-end membuat animasi yang sederhana namun indah. Library ini dapat diintegrasikan langsung ke dalam framework javascript seperti React, React Native, atau Vue
Instalasi
npm instal popmotion
Mo JS
Perpustakaan ini mirip dengan Popmotion JS dalam hal kesederhanaan dan keindahan. Terlebih lagi, Mo JS cocok untuk pemula karena dilengkapi dengan tutorial dan demo. Meski begitu, Mo JS juga bisa digunakan untuk membuat aplikasi yang cukup rumit
Instalasi
npm instal mo-js
Vivi JS
Jika Anda melihat dunia dengan perspektif titik poligon yang memiliki nilai numerik yang mirip dengan properti di SVG, Anda pasti akan menyukai perpustakaan ini. Vivus JS adalah library yang ringan, mudah digunakan, dan tidak memiliki dependensi
Instalasi
npm instal vivus
Greensock JS
Greensock JS juga sering disebut GSAP (Greensock Animation Platform). Cepat dan efisien adalah keunggulan Greensock JS. Library ini dapat berjalan di hampir semua browser
Instalasi
npm instal gsap
****
Itulah 9 library Javascript untuk membuat animasi berbasis web yang populer hingga saat ini. Semua library tersebut sudah memiliki community base yang cukup di Github sehingga kita tidak perlu khawatir akan error di kemudian hari