Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

10 Rekomendasi Repo Github untuk Motion pada Web

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Hasyemi Rafsanjani (you can also view the original English article)

GitHub adalah tempat terbaik untuk menemukan proyek yang didistribusikan secara bebas ke publik, namun pernahkah Anda menandai sebuah repo hanya untuk melupakan betapa keren dan bermanfaatnya? Pada artikel ini saya akan memberikan beberapa proyek bagus yang tersedia secara gratis di GItHub yang memiliki fokus kuat untuk membantu animator membangun animasi motion untuk web.

1. Rellax

Rellax adalah library yang halus, super ringan, paralaks yang juga bekerja di berbagai perangkat. Tanpa menulis banyak kode Anda dapat belajar bagaimana membuat pengalaman scrolling yang mulus untuk proyek Anda dan memahami seluk-beluk apa yang membuat sebuah paralaks terlihat seperti apa adanya.

2. Dynamics.js

Jika Anda menciptakan lebih banyak motion berbasis fisika yang seperti dalam kehidupan nyata untuk pekerjaan Anda, maka tidak perlu mencari lebih jauh lagi dari dynamics.js.

Dengan ini, Anda dapat menganimasikan properti CSS dari elemen DOM, properti SVG dan objek JavaScript. Tidak hanya library ini akan menguji kecakapan kemampuan Anda dalam JS, tapi Anda juga akan belajar bagaimana fisika membuat pengalaman yang lebih intuitif dan seperti kehidupan nyata bagi pengguna.

Slider di beranda mereka benar-benar membantu Anda memahami bagaimana setiap properti bekerja bersamaan dengan rekan-rekannya untuk menciptakan gerakan berbasis fisika yang mencerminkan gerakan dunia nyata kita.

3. Barba.js

Membuuat transisi yang menakjubkan, fluid dan halus antara halaman situs Anda. Barba.js adalah library berukuran kecil (4 kb minified and gzipped), fleksibel dan bebas ketergantungan yang membantu membawa UX situs Anda ke tingkat berikutnya.

Ini juga pelajaran bagaimana PJAX (push state AJAX) dan Push State API dapat digunakan untuk meningkatkan transisi halaman. Jika Anda belum pernah mendengar tentang teknologi ini, ini adalah pengantar yang bagus untuk mereka, yang pada akhirnya menghasilkan efek yang sangat slick ketika bernavigasi antar halaman.

Tips: lihat tutorial berikut untuk mengenal Push State

4. Wick

Wick adalah alat pembuatan multimedia gratis dan open source. Ini adalah animasi hibrida berbasis browser dan environment pengkodean untuk merangkai interaktivitas untuk web. Terinspirasi dari alat-alat seperti Flash (animasi berbasis keyframe), HyperCard, dan Scratch, dikembangkan untuk menanggapi kebutuhan alat semacam itu dengan web modern.

Membuat gerakan halus menggunakan browser sebagai panduan Anda, tanpa mendownload perangkat lunak tambahan untuk melakukannya.

5. Bounce.js

Buat animasi menggunakan CSS3 yang indah dalam waktu singkat. Alat di bouncejs.com memungkinkan Anda menghasilkan keyframe statis yang dapat digunakan tanpa JavaScript tambahan, namun jika Anda ingin aplikasi Anda menghasilkannya dengan cepat, Anda dapat menggunakan library Bounce.js.

Output keyframe sangatlah menarik, dan sangat berwawasan tentang penggunaan fungsi matriks() CSS dan pembuatan keyframe. Ini adalah alat yang hebat untuk benar-benar menyempurnakan gerakan tertentu dan memahami bagaimana keyframes dapat digunakan untuk menciptakan gerakan bouncing yang menakjubkan. Ada juga artikel Medium yang bagus, yang ditulis oleh penciptanya Joel Besada, untuk mengurangi jumlah keyframes yang dihasilkan, mengapa ini adalah sesuatu yang patut diupayakan, dan sesuatu yang menarik tentang easing.

Catatan: Saat ini Bounce tidak lagi dalam pengembangan aktif tanpa rencana untuk pengembangan masa depan berdasarkan dengan yang dinyatakan Joel.

6. Anime

Anime adalah library animasi JavaScript yang ringan. Ini bekerja dengan properti CSS, CSS transform, SVG atau atribut DOM, dan Objek JavaScript.

Ini adalah library yang bagus untuk mendapatkan pemahaman tentang bagaimana membangun dan belajar tentang gerakan berbasis timeline, memulai animasi pada waktu tertentu, animasi keyframe yang rumit, menentukan waktu mulai relatif terhadap durasi animasi sebelumnya, membangun kontrol pemutaran dan banyak lagi.

Saya sangat menyarankan untuk mencobanya dan jika Anda menginginkan lebih banyak lagi, ada banyak demo di CodePen juga.

7. Wait! Animate

Saya menyukai yang satu ini Wait! Animate menyediakan cara mudah untuk menghitung persentase keyframe sehingga Anda dapat memasukkan waktu tunda antara setiap iterasi animasi.

Ada alat konfigurasi untuk menambahkan waktu tunggu ke dalam animasi Anda sendiri tanpa memerlukan JavaScript, karena CSS tidak menyediakan cara mudah untuk menjeda animasi sebelum diputar kembali; animation-delay hanya menunjukkan jeda pada awal animasi.

Anda bahkan dapat menyesuaikan timing, durasi dan arah gerakan Anda untuk menyempurnakan gerakan yang Anda inginkan. Ini adalah cara yang sangat menyenangkan untuk belajar tentang motion dan memberi Anda umpan balik untuk setting Anda secara real-time.

8. MoJS

MoJS adalah "motion graphics tool belt untuk web". Ini memungkinkan Anda membuat animasi dan efek yang halus untuk pengalaman pengguna yang menakjubkan. Bahkan ada pilihan untuk membuat custom build untuk kebutuhan proyek Anda saat ini; begitu lama besar ukuran file menjadi kelebihan!

Ada banyak demo untuk Anda jelajahi dan terdaftar di GitHub. Belajarlah untuk membuat beberapa efek gerakan yang benar-benar menawan seperti favorit saya "Bubble Layout", word revealing, dust trails dan efek lainnya seperti "burst", dan banyak lagi. Jika Anda ingin belajar membuat efek yang sulit dan rumit tidak perlu mencari lebih jauh lagi, karena MoJS akan membantu Anda

9. Spirit

Hantu lain .. Spirit adalah alat animasi yang luar biasa untuk web (aplikasi dapat ditemukan di sini); menganimasikan objek menggunakan garis waktu visual. Saya hanya tahu yang satu ini akan menjadi luar biasa!

Spirit akan mengubah cara Anda membuat animasi untuk web. Anda diberikan kendali baris waktu penuh, dan kemampuan untuk menginspeksi animasi dan cara mudah untuk belajar dan mengerti API mereka. ni adalah cara intuitif dan sederhana untuk memahami pembuatan animasi tanpa biaya overhead yang besar untuk mempelajari perangkat lunak yang rumit.

10. ScrollReveal

ScrollReveal memberi Anda animasi scroll yang mudah untuk web. Dan ringan juga; Selain tanpa tergantung pada library lainnya, ukuran library ini hanya 3.3KB minified dan Gzipped.

Biarkan kaki Anda basah dengan animasi berurutan berbasis interval yang dapat dikonfigurasi untuk dimuat secara asinkron. ScrollReveal juga mendukung rotasi 3d secara default dan itu berarti Anda bisa belajar 3D Anda dan benar-benar menjadi kreatif tanpa harus mengenal fungsi dan mekanika scroll yang mendasarinya.

Pikiran Terpisah

Apakah Anda memiliki beberapa repo open-source yang saya lewatkan? Sudahkah anda menggunakan salah satu proyek yang terdaftar pada artikel ini? Tinggalkan komentar dan link di bawah ini! Saya harap setidaknya satu dari contoh ini bisa berguna dalam pekerjaan sehari-hari Anda. Selamat ngoding. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.