You are here

15 Tools Web Animations Yang Wajib Kamu Coba.

Animasi sangatlah penting dalam suatu website. Selain untuk mempercantik dan memperindah tampilan. Animasi bisa membuat ciri khas dari suatu website tersebut.

User Experience juga akan bisa lebih didapat oleh para pengunjung saat website anda ditambahkan beberapa animasi. Mulai dari Scroll EffectLoading, Transitions, dan masih banyak yang lainnya.

Bagi seorang designer ini adalah hal yang sangat penting. Kamu dapat menggabungkan beberapa animasi, dan website kamu seketika menjadi sangat menarik dimata orang lain. Nah berikut kami rangkum beberapa plugin – plugin yang mungkin bisa kamu coba untuk dipakai diwebsite mu, mungkin kamu tidak akan memakai semuanya tetapi siapa tahu suatu saat kamu membutuhkannya.

1. ANIMATE.CSS

Animate.css adalah sebuah library sederhana yang memungkinkan teks heading atau apapun itu menjadi bergerak atau sesuai namanya yaitu menampilkan animasi sederhana. Mulai dari bouncing hingga transitions. Library ini cocok untuk kebutuhan segala project kamu.

2. MAGIC ANIMATIONS

Sesuai namanya yaitu Magic,  tools ini fokus kepada effect yang luar biasa atau unik serta bermacam – macam. Tools ini dapat menambah User Experience yang sangat baik jika digunakan dalam website mu. Kamu dapat mencobanya disini Magic Animations.

3. ANI.JS

Sama seperti yang sebelumnya, AnijS dapat melakukan animasi secara intuitif. Namun hanya menggunakan perintah sederhana seperti If, On, Do, To. Nah yang bagusnya di AnijS ini kamu bisa memakai class mu sendiri atau bahkan bisa dikombinasikan dengan Animate.css tadi.

4. SNABBIT.JS

Snabbit.js adalah animasi minimalis yang menampilkan suatu elemen yang cepat. Contohnya roket yang beranimasi. Ukurannya saja hanya 5KB. Sangat kecil bukan? Namun library ini dapat menampilkan seperti translating, rotating, skewing, scaling atau resizing sebuah shape.

5. MOTION UI

Sama seperti animasi – animasi sebelumnya. Motion UI ini juga menampilkan animasi yang fleksibel serta menggunakan SASS Library untuk menciptakan animasi yang indahnya. Library ini dapat berfungsi disemua browser populer kecuali IE9.

6. WAIT! ANIMATE

Wait! Animate adalah sebuah library yang berbasi Font-Awesome. Namun dapat beranimasi layaknya library sebelumnya. Tetapi library ini dapat diatur seberapa detik animasi yang diperlukannya. Fungsi kegunaannya bisa menjadi pengingat kepada si user terhadap sesuatu pada website yang belum dilakukan.

7. ANIME.JS

Anime.js mungkin kamu pasti memikirkan suatu hal yang berhubungan dengan negara Jepang bukan? Tapi bukan loh. Anime.js ini adalah sebuah library javascript yang mempunyai fitur mengesankan seperti menggambar garis di website, penggabungan beberapa objek shape dan menjadikannya bergerak layaknya pinball.

8. VIVUS.JS

Jika kamu sering menggunakan gambar SVG dalam website. Maka kamu harus mencoba Vivus.js. Library ini dapat menggambar suatu objek SVG dengan halus dan pelan untuk menciptakan User Experience yang berbeda.

9. ROCKET

Rocket adalah library animasi juga seperti yang sebelumnya. Namun seperti namanya, library ini dapat menampilkan animasi layaknya sebuah roket di luar angkasa. Library ini bisa digunakan contohnya untuk memasukkan sebuah product kedalam keranjang di suatu website.

10. MIXITUP

MixItUp. Kali ini berbeda dengan library sebelumnya. Library ini digunakan untuk data-filter suatu object. Sangat cocok untuk menampilkan beberapa Portofolio mu dalam website. Tentu dengan animasi yang menakjubkan.

11. WALLOP

Wallop digunakan untuk menyembunyikan sebuah objek tetapi dengan cara yang menyenangkan dan dapat ditebak. Biasanaya digunakan dalam sebuah slider website. Namun, kamu dapat mengembangkan nya agar dapat lebih interaktif dan menyenangkan.

12. ICONATE.JS

Iconate.js adalah sebuah library animasi yang dapat digunakan oleh dua icon sekaligus dar Font-Awesome atau Glyphicons. Jadi nantinya ketika kamu meng-klik suatu icon, icon tersebut akan berubah sesuai pilihan icon kedua mu. Tentu dengan animasi yang sangat unik dan menarik.

13. FOX HOLDER

Kali ini berbeda lagi dengan sebelumnya. Fox Holder adalah sebuah package dari 15 efek yang tersedia untuk keperluan elemen – elemen dalam form. Cocok sekali untuk menghias dan menambah User Experience pada saat mengisi formulir contact.

14. SCROLL TRIGGER

Scroll Trigger adalah sebuah library untuk menampilkan efek saat website di scroll ke bawah. Dengan menggunakan CSS Animations serta Vanilla.js kamu dapat mengubah efek sesuai keinginanmu.

15. AOS

Sama seperti library sebelumnya. AOS adalah library yang menampilkan efek scroll yang lebih smooth dan berbagai macam pilihan untuk keperluan website mu.

 

Nah, itu tadi beberapa tools yang saya rangkum untuk digunakan dalam website kamu. Menarik bukan? Selain dapat meningkatkan User Experience tentu skill dalam membuat website mu akan meningkat. Kamu dapat mendownload nya terlebih dahulu dan digunakan jika suatu saat diperlukan ya.

Oke, sekian artikel yang saya bagikan kali ini. Terima kasih sudah membaca. Sampai jumpa di artikel selanjutnya ya 🙂

Salam,

 

Sumber : https://www.webdesignerdepot.com/2017/08/75-web-animation-tools-you-have-to-try/

 

Leave a Reply

Top