10+ Perpustakaan Animasi JavaScript Terbaik untuk Digunakan pada tahun 2020

Perpustakaan Animasi JavaScript Terbaik


Jika Anda ingin menarik perhatian pengunjung situs web Anda, apa yang bisa lebih baik daripada animasi? Dengan menggunakan banyak mesin aplikasi yang tersedia secara bebas di web, Anda dapat dengan mudah membuat elemen situs web Anda memudar, terpental, atau bersuara. Dalam posting hari ini, kita akan lihat bagaimana perpustakaan animasi JavaScript dapat membantu dengan semua itu.

Pertama, sedikit tentang animasi JavaScript

Satu hal untuk menambahkan animasi sederhana yang hanya perlu satu tindakan (misalnya, toggling). Untuk ini, Anda selalu dapat menggunakan animasi CSS sederhana. Tetapi, untuk efek yang lebih kompleks atau canggih, JavaScript adalah alat yang lebih baik. Tak perlu dikatakan lagi bahwa menggunakan JavaScript untuk membuat animasi lebih menantang daripada menggunakan CSS.

Namun demikian, JavaScript dapat menangani hal-hal yang tidak dapat dilakukan CSS. Ini memberi pengembang lebih banyak kekuatan untuk mengendalikan animasi kompleks yang perlu mengoordinasikan banyak bagian yang bergerak.

Animasi JavaScript diimplementasikan dengan menambahkan perubahan bertahap ke gaya elemen. Anda dapat menambahkannya sebaris sebagai bagian dari kode Anda, atau memasukkannya ke objek lain. Saat rendering, perubahan ini dipanggil oleh timer. Anda juga dapat mengontrol kontinuitas animasi dengan menyesuaikan interval waktu perubahan.

Perpustakaan animasi JavaScript terbaik

Berikut daftar perpustakaan animasi JavaScript yang dapat Anda gunakan untuk menambahkan beberapa animasi yang tampak luar biasa ke situs web Anda:

1. Anime.js

Perpustakaan Animasi JavaScript: Anime.js

Mari kita mulai daftar perpustakaan animasi JavaScript ini dengan Anime.js. Pustaka animasi ringan ini menampilkan 35K + bintang pada GitHub. Bekerja dari satu API yang kuat, Anda dapat menggunakannya untuk menghidupkan atribut HTML, CSS, JS, SVG, dan DOM. Dengan sistem mengejutkan bawaan, ia dapat membuat riak, gerakan terarah, efek tindak lanjut dan tumpang tindih menjadi sederhana. Sistem ini dapat digunakan untuk pengaturan waktu dan properti.

Ada banyak hal yang dapat Anda lakukan dengan menggunakan fungsi panggilan balik dan kontrol bawaan. Misalnya, Anda dapat memutar, menjeda, mengontrol, membalikkan, dan memicu peristiwa secara tersinkronisasi. Untuk melihat apa lagi yang mungkin menggunakan perpustakaan ini, Anda dapat mengunjungi Codepen.

2. Velocity.js

Velocit.js

Velocity.js menggabungkan transisi jQuery dan CSS terbaik. Tarifnya mendekati 17K bintang pada GitHub dan membanggakan dari pengguna terkemuka seperti WhatsApp dan Mailchimp. Looping, membalikkan, menunda, menyembunyikan / menampilkan elemen, matematika properti (+, -, *, /), dan akselerasi perangkat keras, semua merupakan bagian dari fitur.

Anda dapat menggunakan Velocity.js untuk menggulir jendela peramban. Ia dapat bekerja dengan jQuery yang dimuat di peramban Anda dan terlepas dari itu, dan bahkan membatalkan animasi sebelumnya.

3. Popmotion

Popmotion

Dekat dengan 18 rb bintang, Popmotion adalah perpustakaan animasi fungsional untuk setiap lingkungan JavaScript. Ini dapat bekerja dengan sembarang API yang menerima angka sebagai input seperti React, Three.js, A-Frame dan PixiJS.

Popmotion hanya memiliki berat 11,7 kB, namun tetap memiliki pukulan. Ini fitur animasi seperti keyframe, pembusukan, garis waktu untuk menyinkronkan beberapa instance dan banyak lagi. Anda dapat membuat terhuyung-huyung serangkaian animasi atau fungsi, serta menggunakan fungsi murni untuk membuat konfigurasi Anda sendiri.

4. Three.js

Perpustakaan animasi JavaScript: Three.js

Three.js berada di puncak daftar pustaka animasi JavaScript dengan bintang 60K + pada GitHub. Itu tergantung pada WebGL untuk membuat dan membuat animasi 3D di browser.

Ada banyak dokumentasi untuk membantu Anda, dan setelah Anda melewati kurva belajar, tidak banyak yang tidak dapat Anda capai menggunakan perpustakaan ini. Pertama, menggunakan editor Three.js, Anda membuat adegan. Setelah itu, Anda bisa menambahkan angka geometris, dan menyesuaikan pencahayaan dan kamera. Bahan, tekstur, objek, warna, dan fogging semuanya dapat diubah, dan file terakhir dipublikasikan untuk proyek Anda.

5. GreenSock JS

GreenSock

GreenSock’s GSAP bekerja dengan satu set file JavaScript kecil yang membuat animasi tampak hebat di semua browser utama. Ini dengan lancar rantai beberapa properti animasi dan menghilangkan bug browser.

Tindakan GSAP termasuk membuat animasi di atas Kanvas dan menganimasikan objek apa pun dalam sebuah adegan. Juga semakin mengungkapkan, memetakan atau memindahkan objek apa pun di sepanjang jalan. Untuk tujuan ini, ia bekerja dengan banyak aplikasi perangkat lunak seperti SVGPlugins, PixiPlugin, WebGL, Adobe Animate dan EaseJS. Struktur modularnya membantu Anda memilih hanya fungsi yang Anda butuhkan. Dengan 8 juta pengguna dan 10K + bintang di GitHub, perpustakaan yang kuat ini memiliki banyak manfaat.

6. AniJS

AniJS

Di antara pustaka JavaScript dalam daftar ini, AniJS agak unik. Ini memungkinkan Anda untuk menambahkan animasi ke elemen-elemen dalam struktur sederhana ‘seperti kalimat’, bagus untuk orang-orang yang baru mengenal animasi. Terlebih lagi, sifatnya yang tidak spesifik memungkinkan hampir semua orang menggunakannya dalam desain UX rutin.

Di GitHub, Harga AniJS lebih dari 3,5 ribu bintang. Itu tidak bergantung pada perpustakaan pihak ketiga dan umumnya membantu mempercepat pengembangan. Ini berfungsi dengan baik di Android dan iOS, dan juga di semua browser populer.

7. Mo.js

Mo.js

Grafik gerak memiliki peran besar untuk dimainkan dalam animasi, dan Mo.js adalah salah satu opsi yang dapat digunakan untuk membuat dampak. Dengan sejumlah tutorial dan demo untuk membantu, pemula mungkin tidak merasa kesulitan untuk membuat bentuk geometris dan animasi waktu ke titik.

API mungkin tampak sederhana, tetapi ada banyak hal yang dapat Anda lakukan dengannya. Di dalam toolkit ini, Anda akan menemukan Editor Kurva dan Editor Timeline untuk membantu Anda membuat animasi, serta Player untuk mengontrol animasi Anda. Ada modul berbeda untuk mengejutkan, pelonggaran, garis waktu dan banyak lagi. Semua ini menghasilkan Mo.js mendekati 16K bintang GitHub.

8. Vivus.js

Perpustakaan animasi JavaScript: Vivus

Jika Anda ingin meniru gambar pena di layar secara waktu nyata, Anda akan mencapai sasaran dengan Vivus. Ini memungkinkan Anda menghidupkan SVG yang memberi kesan ditarik. Karena tidak memiliki dependensi, cepat dan ringan.

Anda dapat memilih salah satu animasi yang tersedia – Tertunda, Sinkronkan atau OneByOne. Selain itu, Anda juga dapat membuat skrip khusus untuk menggambar SVG Anda. Untuk fleksibilitas yang lebih, Anda dapat mengganti animasi setiap jalur menggunakan fungsi JavaScript sederhana. Lebih dari 13K pengguna memberikan acungan jempol ke perpustakaan ini GitHub.

9. ScrollReveal JS

ScrollReveal

Jika Anda ingin menghidupkan elemen web Anda saat mereka menggulir ke tampilan, ScrollReveal tidak akan mengecewakan. Pustaka animasi yang mudah dipelajari ini tidak memiliki ketergantungan dan bintang 18,5K + GitHub.

ScrollReveal mendukung berbagai jenis efek dan bekerja dengan baik dengan browser web dan seluler. Ini sengaja bekerja dengan konfigurasi bare-tulang, sehingga Anda dapat menggunakannya sebagai kanvas untuk kreativitas Anda. Untuk memaksimalkan efek animasi, pembuat menyarankan agar Anda menggunakannya dengan hemat.

10. Typed.js

Typed.js

Typed.js adalah pustaka sederhana (lebih dari sebuah plugin, sebenarnya) untuk menghidupkan mengetik di layar Anda. Setelah Anda memasukkan string apa pun, pengunjung dapat melihatnya diketik dengan kecepatan yang ditentukan. Tidak hanya itu, Anda dapat bekerja tombol backspace, serta memulai kalimat baru. Jika Anda ingin memperbolehkan pengunjung dengan JS yang dinonaktifkan juga melihatnya, Anda hanya perlu menempatkan div HTML pada halaman tersebut. Dengan begitu, bot dan mesin pencari juga bisa melihat kata-kata yang diketik.

Perpustakaan ini memberi harga 9.5K + bintang pada GitHub. Pengguna yang kuat termasuk Slack dan Envato.

11. Lottie oleh AirBnB

Perpustakaan animasi JavaScript: Lottie

Lottie adalah format grafik animasi ringan yang menyeimbangkan grafik berkualitas tinggi dengan biaya renderingnya. Itu membuat aplikasi lebih kecil dan termasuk fitur dinamis. Ini dapat digunakan untuk web, Android, iOS dan IoT, tanpa perlu perangkat lunak tambahan.

Lottie dapat berjalan di browser apa pun yang mendukung JavaScript. Animasi disimpan dalam teks biasa dan dapat dibaca manusia. Karena data teks disimpan dalam format JSON, maka dengan mudah diasimilasi dengan lingkungan JavaScript apa pun. Ini membuatnya menjadi format grafik animasi populer untuk meningkatkan tampilan ponsel. Versi android saja menikmati hampir 30 ribu bintang di GitHub.

Jika Anda telah mencapai akhir daftar pustaka animasi JavaSCript ini, Anda mungkin juga tertarik untuk mencari pustaka dan kerangka JavaScript lainnya. Atau, lihat pustaka komponen React UI terbaik ini.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map