Cara menggunakan ANIATE di JavaScript

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