Perpustakaan Animasi JavaScript: 10 Pilihan Populer

Saya suka bereksperimen dengan berbagai efek animasi, terutama yang sederhana dan dapat diimplementasikan dengan CSS. Tapi, jika kita melihat gambaran yang lebih luas – animasi CSS hanya akan membawa Anda sejauh itu . Dan, jika Anda ingin membuat pengalaman pengguna yang kompleks dan interaktif – cepat atau lambat, Anda harus beralih ke JavaScript.

Keuntungan utama menggunakan JavaScript untuk efek animasi adalah Anda dapat mengontrol lebih banyak logika animasi. Ini termasuk kelancaran transisi, mengontrol status dan respons DOM, tetapi juga penggunaan grafik 2D dan 3D berkat WebGL.

Jenis perpustakaan animasi JavaScript

Jadi, karena perpustakaan animasi JS datang dalam berbagai bentuk dan bentuk, sangat membantu untuk mempersempit area fokus tertentu . Banyak mesin dan kerangka kerja tidak hanya digunakan untuk hal-hal front-end, tetapi juga untuk membangun game, dan membuat konten interaktif lainnya.

Untuk pengumpulan khusus ini, fokus saya adalah pada perpustakaan yang paling umum digunakan dalam pengembangan front-end, baik sendiri atau bersama dengan salah satu kerangka kerja saat ini.

Pada waktunya, saya akan mempertimbangkan untuk menambahkan lebih banyak pustaka ke daftar ini yang skalanya lebih kecil tetapi masih menyediakan cara yang berarti untuk menambahkan animasi interaktif ke proyek Anda.

Setiap perpustakaan memiliki tautan ke situs webnya dan halaman GitHub. Saya juga telah menambahkan contoh CodePen yang dapat Anda jalankan dari halaman ini dan sumber daya tambahan – yang berupa tutorial atau panduan video.

#1 – Tiga.js

Three.js adalah pustaka masuk untuk membuat efek animasi 3D yang Anda gunakan dalam pengembangan situs web kreatif. Three.js menghilangkan kebutuhan pengembang untuk mempelajari WebGL, dan sebagai gantinya dapat berfokus pada pembuatan efek 3D interaktif tanpa kerumitan.

Di kelas atas, Three.js digunakan untuk membuat pengalaman virtual interaktif, seperti Mozilla Hubs. Selain itu, perpustakaan juga sering digunakan dalam menciptakan pengalaman halaman arahan yang imersif. Penerbit dan editorial kelas dunia telah menggunakan Three.js selama bertahun-tahun untuk membuat halaman berbasis data dengan pembaruan dinamis.

Jika Anda mengunjungi beranda, ada sejumlah besar proyek yang disorot, yang seharusnya memberi Anda banyak inspirasi/kejelasan tentang bagaimana perpustakaan ini digunakan dalam lingkungan sehari-hari.

Contoh Animasi Three.js

Lihat Latar Belakang Gelombang Garis Pena Mesh – THREE.js oleh CP Designer (@cpandya) di CodePen.

Sumber Tambahan Three.js

• Bagaimana kami membangun bola dunia GitHub
• Efek Distorsi Piksel dengan Three.js

#2 – Anime.js

Anime.js dari Julian Garnier mungkin adalah perpustakaan paling terkenal ke-2 untuk mengintegrasikan animasi ke dalam proyek berbasis web. Popularitasnya berasal dari memiliki alat bawaan untuk membantu mempercepat proses animasi elemen CSS, SVG, dan DOM.

Misalnya, Anda dapat menargetkan pemilih CSS tertentu dan kemudian menerapkan logika animasi yang disempurnakan melalui JavaScript, bukan menulis @keyframes sendiri.

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

Hanya dengan cuplikan di atas saja, Anda dapat membuat efek yang terlihat seperti ini:

Jika Anda melakukan ini dengan CSS – Anda harus memilih setiap blok grid individual dan menulis logika terpisah untuknya. Tidak hanya itu tidak praktis, tetapi juga banyak pekerjaan. Di halaman dokumen Anime.js, Anda akan menemukan banyak contoh serupa. Dan, demo di bawah ini selangkah lebih maju untuk menunjukkan bagaimana perpustakaan ini dapat digunakan dalam pengembangan front-end modern.

Contoh Animasi Anime.js

Lihat animasi logo Pen anime.js oleh Julian Garnier (@juliangarnier) di CodePen.

Sumber Daya Tambahan Anime.js

• Tutorial Anime.js – Mesin Animasi JavaScript dalam 10 Menit
• Animasi Antarmuka Pengguna dengan Anime.js

#3 – Gerakan Pop

Popmotion adalah perpustakaan animasi tingkat rendah yang ditulis dalam TypeScript. Ini juga merupakan library yang mendukung library Framer Motion yang populer (kami telah mencantumkannya dalam artikel ini) library yang digunakan dalam proyek React. Tanpa pendapat, Anda dapat menggunakan Popmotion untuk mengintegrasikan efek khusus dengan menulis fungsi tambahan yang ingin Anda gunakan.

Sesuai dengan namanya, Popmotion sangat bagus untuk menganimasikan elemen antarmuka pengguna melalui penggunaan berbagai animasi berbasis gerakan. Ini termasuk efek seperti easing, spring, keyframe, dan efek transisi yang lebih rumit. Contoh di bawah ini berfungsi dengan baik dalam menampilkan aplikasi praktis dari efek animasi untuk elemen komponen.

Contoh Animasi Popmotion

Lihat demo Pen Popmotion oleh Arden (@aderaaij) di CodePen.

Sumber Daya Tambahan Popmotion

• Visualisasikan Algoritma Pancake dengan React dan Popmotion.io
• Tambahkan animasi pegas ke aplikasi sudut Anda dengan popmotion

#4 – mo.js

Mo.js berfokus pada grafik gerak dan unggul dalam menyediakan struktur kode sederhana yang dapat Anda terapkan dalam proyek mandiri, tetapi juga bersama dengan kerangka kerja seperti React.

Dan, karena Mo.js dikirimkan dengan API deklaratifnya sendiri – Anda dapat mengontrol setiap langkah animasi. Ini termasuk mendefinisikan tidak hanya logika untuk apa yang ingin Anda capai, tetapi juga bagaimana Anda akan mencapainya. Pustaka mencakup komponen dan contoh yang telah dibuat sebelumnya yang disesuaikan untuk pengalaman pengguna yang kaya secara visual.

Berikut adalah cuplikan sampel:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

Seperti yang Anda lihat, banyak logika yang telah ditentukan sebelumnya. Jadi, daripada harus memunculkan ide Anda sendiri, Anda dapat mencatat properti yang disediakan, dan membangun jalan Anda. Bagian tutorial dalam dokumen memiliki beberapa contoh aplikasi praktis, terutama efek yang menambahkan animasi kecil namun bermakna ke elemen halaman web sehari-hari.

mo.js Contoh Animasi

Lihat Pen Link Hover Effects w/ mo.js oleh Mike Quinn (@mprquinn) di CodePen.

mo.js Sumber Daya Tambahan

• Cara menggunakan MoJS dengan React
• Memahami MoJS

#5 – p5.js

p5.js adalah implementasi JavaScript Pemrosesan – “bahasa” terpisah yang dimaksudkan untuk digunakan oleh seniman visual. Tidak seperti beberapa contoh yang telah kita lihat sejauh ini, p5.js adalah perpustakaan animasi universal, memberikan solusi tidak hanya untuk aplikasi praktis tetapi juga untuk proyek yang lebih kuat dan kompleks. Ini termasuk dukungan penuh untuk efek 2D & 2D.

Sejauh menggunakan p5.js dalam proyek situs web, perpustakaan membuka jalan untuk kreativitas yang mendalam. Misalnya, Anda dapat dengan cepat mem-bootstrap efek seperti layar asap, pohon animasi, dan halaman arahan berbasis data yang dapat berinteraksi dengan pengguna.

Anda memang harus melakukan semua gambar sendiri, tetapi dengan jumlah sumber daya yang tersedia untuk p5.js – saya pikir Anda akan menemukan bahwa tidak begitu sulit untuk memulai. Dan, tak perlu dikatakan lagi, komunitas di balik kedua proyek ini sangat terlibat.

p5.js Contoh Animasi

Lihat Pena P5.JS Memutar dan Memutar. oleh Sdsmnc (@supastrocat) di CodePen.

p5.js Sumber Daya Tambahan

• Pemrosesan dan p5.js
• Matahari terbenam dan Bintang Jatuh di p5.js

#6 – Gerak

React sangat populer sehingga masuk akal jika ia memiliki perpustakaan animasinya sendiri. Framer Motion hadir dengan API bawaan yang memungkinkan pengembang React menyederhanakan proses pembuatan komponen animasi, tetapi juga mengurangi beberapa rintangan karena perlu mempelajari CSS dan properti animasi independennya. Dan itu cukup mudah untuk dikerjakan.

Contoh cuplikan:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Animasi di Framer ditentukan oleh properti motion & animate . Ini memungkinkan Anda memilih seluruh komponen dan elemen dalamnya, yang kemudian dapat Anda perkaya dengan logika animasi kustom Anda. Artikel Smashing dari Nefe Emadamerho-Atori di bagian sumber daya adalah titik awal yang bagus untuk melihat cara kerja Framer Motion.

Animasi Contoh Gerak

Lihat Tombol Pena Laser Sight oleh codebro (@codebro) di CodePen.

Sumber Daya Tambahan Gerak

• Memperkenalkan Gerakan Pembingkai
• Animasi Responsif dengan Framer Motion

#7 – GSAP

Saya telah melihat seni GSAP dibagikan di Twitter cukup banyak baru-baru ini. Tapi itu tidak mengejutkan. Banyak animasi dan efek dinamis yang kita lihat dalam proyek kreatif telah dimungkinkan berkat mesin GSAP yang tangguh.

Perpustakaan tidak hanya dioptimalkan untuk kinerja, tetapi juga sangat kompatibel dengan teknologi favorit Anda. Itu termasuk kerangka kerja seperti React & Vue, tetapi juga pustaka seperti jQuery, dengan dukungan tambahan untuk peramban web seluler dan yang sudah ketinggalan zaman.

Karena GSAP mampu membuat kueri dan menganimasikan hampir semua jenis elemen web (dari CSS ke Canvas hingga objek DOM) – Anda dapat menggunakannya untuk sesuatu yang sederhana seperti efek pemintal, atau bekerja keras dan membangun pengalaman situs web yang benar-benar dinamis.

Bagian Showcase memiliki ratusan contoh proyek yang telah dikerjakan oleh pengembang. Lihat untuk kedua inspirasi, tetapi juga untuk melihat apa yang mungkin dengan perpustakaan ini.

Contoh Animasi GSAP

Lihat Intro Pen Hulu Originals oleh Hyperplexed (@Hyperplexed) di CodePen.

Sumber Daya Tambahan GSAP

• Teknik Animasi Menakjubkan dengan GSAP
• Membuat Urutan Animasi Situs Web yang Rumit – Tutorial GSAP 3

#8 – Kertas.js

Paper.js adalah perpustakaan animasi dengan fokus yang ketat pada animasi grafis vektor. Pendekatan ini memungkinkan Anda tidak hanya efek statis, tetapi juga pengalaman dinamis interaktif. Secara khusus, Paper.js populer di antara proyek animasi di mana pengguna dapat menyeret objek, mengatur ulang, dan memberikan masukan khusus.

Objek dapat dikategorikan melalui lapisan, dengan setiap lapisan memiliki spesifikasi animasi khusus. Ini berguna saat Anda mengerjakan struktur kompleks, memungkinkan Anda menghapus/menonaktifkan lapisan tertentu kecuali diminta oleh pengguna.

Contoh Animasi Paper.js

Lihat Pen Filling Glasses – Paper.js oleh Fiorald Ismaili (@Fiorald) di CodePen.

Sumber Tambahan Paper.js

• Penghapusan Vektor Paper.js
• Gelombang di Paper.js

#9 – Animasi Web

Pustaka ini adalah port JavaScript langsung dari Web Animation API. Pustaka terintegrasi langsung dengan spesifikasi Element.animate() , memungkinkan Anda menggunakan fitur animasi yang biasanya ditulis menggunakan logika CSS. Penulis menjelaskannya dengan mengatakan:

“Implementasi JavaScript dari Web Animations API yang menyediakan fitur Web Animation di browser yang tidak mendukungnya secara asli. Polyfill kembali ke implementasi asli saat tersedia.”

Animasi Web Contoh Animasi

Lihat Animasi Imperatif Pena oleh Sam Thorogood (@samthor) di CodePen.

Sumber Daya Tambahan Animasi Web

• API Animasi Web – API Web | MDN
• Animasi Web Tingkat 2 | W3C

#10 – Proton

Efek partikel pasti ada di tren desain web modern. Desainer tidak hanya mengimplementasikannya untuk efek latar belakang, tetapi juga untuk transisi yang menarik, dan bahkan presentasi untuk proyek kreatif. Pustaka Proton dirancang khusus untuk kebutuhan penskalaan efek partikel kreatif dengan cepat.

Anda dapat melakukan hal-hal seperti membangun efek percikan, dan interaksi berbasis tabrakan, tetapi juga mengubah teks menjadi pengalaman animasi baru dan menarik.

Contoh Animasi Proton

Lihat Pen my-emitter oleh matsu7089 (@matsu7089) di CodePen.

Sumber Daya Tambahan Proton

• Contoh Mesin Proton
• Komponen reaksi untuk latar belakang partikel

Ringkasan

Hal yang menyenangkan tentang banyak perpustakaan ini adalah mereka telah ada untuk sementara waktu. Dengan demikian, relatif mudah untuk menemukan contoh tetapi juga panduan mendalam tentang cara menggunakan perpustakaan tertentu dalam konteks tertentu.

Di atas segalanya, ada baiknya untuk mengetahui tujuan seperti apa yang ingin Anda capai, terutama jika Anda akan mengerjakan animasi yang mengimplementasikan data waktu nyata atau input berbasis pengguna.

Dengan kata lain, tidak ada yang terbaik . Setiap perpustakaan memiliki kelebihan dan kekurangannya masing-masing. Bagi saya, saya mungkin akan menggunakan GSAP karena dioptimalkan dengan baik untuk digunakan di hampir semua proyek front-end yang bisa dibayangkan.

Tetapi jika saya melakukan proyek yang tidak terlalu ambisius, perpustakaan seperti Popmotion cukup banyak.