Mohon tunggu...
Seo Techman
Seo Techman Mohon Tunggu... Penulis - Media Informasi Seputar Seo, Tips, Dan Tutorial

Seorang blogger free.. Blog: https://www.seotechman.com

Selanjutnya

Tutup

Inovasi

Inilah 10 Kumpulan Daftar Javascript Animasi Terbaik

22 Maret 2019   17:36 Diperbarui: 22 Maret 2019   17:42 946
+
Laporkan Konten
Laporkan Akun
Kompasiana adalah platform blog. Konten ini menjadi tanggung jawab bloger dan tidak mewakili pandangan redaksi Kompas.

Jika anda melihat sisi dari situs web yang modern, maka akan terlihat beberapa tampilan yang menggunakan animasi berkualitas. Banyak daftar Javascript yang memiliki potensi untuk menjadikan tampilan web menjadi lebih baik, salah satunya yang akan kita bahas kali ini. Disini saya akan membagikan sepuluh daftar Javascript untuk membuat sebuah animasi. Khususnya untuk para Design UI.

Tanpa berlama-lama lagi, dan langsung saja inilah daftar selengkapnya persi Seo Techman.

10 Daftar Javascript Teratas

1. Three.js

Animasi yang pertama dan paling populer dalam daftar ini (dengan lebih dari 900 kontributor untuk proyek ini), adalah Three.js. kenapa Three.js? Karena Javascript ini tetap menjadi alat animasi yang kuat dan bertahan sampai delapan tahun belakangan ini. Bergantung pada WebGL, Three.js dapat digunakan untuk membuat grafik komputer 3D yang luar biasa dan dapat dioperasikan atau dijalankan melalui browser web. Tidak ada batasan apapun yang terdapat pada fitur dari Three.js termasuk, efek Anaglyph, perspektif dan kamera ortografis, alat-alat geometri seperti bidang, kubus, bola, dan torus.

2. Anime.js

Anime.js berada di nomor dua dalam daftar ini. Dibuat oleh Julian Garnier, anime.js adalah salah satu daftar animasi tercepat yang akan Anda temui. Anime.js bekerja sangat lancar, dengan DOM. Salah satu ke unggulannya adalah, Anime.js mendukung disemua jenis browser web seperti Chrome, Firefox, Opera, Safari, dan Internet Explorer 10+. Berikut adalah fitur dari anime.js: Transformasi CSS yang berguna untuk menghidupkan Transisi pada CSS, Animasi SVG untuk garis, dan garis waktu untuk menyinkronkan beberapa instance. Satu hal yang membuat anime.js menarik bagi pengembang yaitu sangat ringan.

3. Particles.js

Daftar ketiga yang akan kita lihat adalah Particles.js. Dibuat oleh Vincent Garreau, Particles.js adalah salah satu JavaScript khusus animasi untuk membuat animasi yang indah dengan titik dan garis. Seperti yang dinyatakan sebelumnya, particles.js ini digunakan untuk membuat suatu animasi yang akan terlihat seperti sebuah partikel-partikel. Oleh karena itu, ini memungkinkan para pengembang web design untuk beralih ke particles.js. Particles.js sangat cocok untuk dijadikan sebagai latar belakang atau background.

4. ScrollReveal.js

scrollReveal.js mengambil tempat nomor empat di daftar kami, dan seperti halnya Particles.js, itu juga merupakan daftar JavaScript khusus untuk animasi. ScrollReveal.js bisa digunakan untuk membuat animasi yang luar biasa dan dapat dikatakan sebagai alat yang ringan (tidak memiliki dependensi) dan cukup mudah digunakan. scrollReveal.js berfungsi dengan baik dengan node DOM, beberapa wadah, konten asinkron, dan mendukung rotasi 3D. Alat terbaik yang dapat Anda peroleh pada animasi ini sudah mendukung banyak browser web, asalkan mendukung pada Transformasi CSS dan Transisi CSS juga.

5. Velocity.js

Berikutnya pada daftar animasi yang luar biasa menakjubkan ini yaitu Velocity.js. Sayang, dari para desainer UI tidak begitu banyak yang menggunakannya. Padahal alat ini dapat memudahkan Anda untuk membuat animasi web yang kuat hanya dengan menggunakan HTML dan SVG. Velocity.js dapat digunakan untuk menggulir jendela browser dan bahkan membatalkan animasi sebelumnya. Salah satu dari beberapa alat animasi yang akan Anda temukan tidak selalu bergantung pada kerangka jQuery yang kuat meskipun menggunakan API yang sama dengan $ .animate () dari jQuery. Beberapa aplikasi seperti WhatsApp dan MailChimp dikenal sebagai pengguna alat yang luar biasa ini.

6. Popmotion.js

Popmotion berada di urutan keenam. Popmotion.js sangat mirip dengan anime.js, Popmotion dapat digunakan untuk membuat animasi browser yang luar biasa. Dan juga memiliki fitur seperti pelacakan pointer, fisika pegas, animasi objek 3D, dll.

7. Mo.js

Dengan fungsionalitas yang mirip dengan Popmotion, mo.js masuk di nomor tujuh dalam daftar ini. Mo.js sangat sederhana untuk membuat animasi web, mudah dipelajari, karena pembuatnya Oleg Solomka telah membuat banyak tutorial dan demo untuk membantu pemula dengan cepat. mo.js juga dilengkapi dengan fitur untuk membuat bentuk seperti lingkaran, poligon, persegi panjang, garis, dll. mo.js mungkin terlihat sederhana untuk digunakan, tetapi ia mampu membuat animasi web animasi gerak grafik yang sangat canggih.

8. Vivus.js

Vivus mengambil posisi nomor delapan dalam daftar ini. Jika Anda sedang mencari alat yang bagus yang dapat bekerja dengan SVG, maka Vivus.js adalah pilihan terbaik, terutama untuk pemula. Vivus.js ini juga sangat cepat dan ringan, karena tidak memiliki dependensi. Selain bekerja dengan SVG, Vivus.js juga dapat digunakan untuk membuat tombol yang bagus dan ada banyak animasi luar biasa lainnya yang tersedia untuk digunakan.

9. GreenSock

GreenSock sering disebut sebagai GSAP (GreenSock Animation Platform) dan merupakan salah satu javascript paling populer.

Dengan kecepatan dan efisiensi tinggi GreenSock juga berfungsi dengan baik di sejumlah besar browser web dan tidak memiliki ketergantungan.

10. AOS

Dari beberapa daftar yang tercatat diatas, sangat banyak yang bergantung pada JavaScript, berbeda dengan AOS (Animate On Scroll) jauh lebih bergantung pada CSS dari pada JavaScript. Dengan AOS, pengembang dapat menghidupkan elemen-elemen halaman selama discroll ke bawah dan kemudian membalikkannya ke animasi status sebelumnya (scroll ke atas). AOS sudah dilengkapi dengan banyak fitur yang ditentukan, salah satunya oleh scrolling event.

Nah, itulah sepuluh daftar Javascript Teratas, yang bisa digunakan untuk membuat animasi yang indah. Jika ingin mencobanya, silahkan cari saja di google, github dan lainnya.

Terimakasih.

HALAMAN :
  1. 1
  2. 2
  3. 3
Mohon tunggu...

Lihat Konten Inovasi Selengkapnya
Lihat Inovasi Selengkapnya
Beri Komentar
Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!
LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun