Hai coders, kali ini kita akan membahas salah satu resep rahasia agar tampilan website menjadi semakin menarik. Tentunya mempunyai website dengan tampilan animasi mengagumkan akan memiliki daya tarik tersendiri bagi siapapun yang melihatnya. Terlebih lagi jika website tersebut nantinya menjadi wadah kreasi seni yang akan memadukan banyak hal di dalamnya. Show Namun, mungkinkah website semacam itu dapat dibuat? Yes, it's possible.. a secret recipe called GSAP will help you to make it true. Apa itu GSAP?GSAP (GreenSock Animation Platform) adalah sebuah library animasi Javascript yang sangat scalable, memungkinkan kita untuk menggunakan efek dinamis pada web, game, maupun cerita interaktif. Dengan GSAP, kita bisa membuat animasi SVG yang menakjubkan, juga mendukung berbagai projek WebGL seperti yang banyak digunakan pada Three.js. Tweens dan Timelines menjadi pemain kunci dari keajaiban yang akan dibuat GSAP. Mengapa menggunakan GSAP?
Cara menginstall GSAP?Cara terbaik untuk menginstal GSAP adalah melalui CDN. Namun, kita juga bisa menggunakan npm atau melalui load simple script tag GSAP. Ada dua cara penginstalan, dengan bonus plugin dan tanpa bonus: Dengan bonus plugin: a. Download ZIP terlebih dahulu disini. b.
Install file dengan npm c. Melalui script tag : Sebelum diceklis : Setelah di ceklis : ceklis bagian apa saja yang ingin ditambahkan, contoh pada gambar ini: Script tag berubah menjadi:
Tanpa Plugin Install dengan perintah : Setelah terinstall, GSAP dapat ditambahkan ke project dengan cara: Untuk menjalankan GSAP ke halaman HTML, gunakan script tag yang mengarah ke file. contoh: untuk melihat panduan dan lebih jelasnya dapat dilihat pada laman berikut ini https://greensock.com/docs/v3/Installation. Hal lain yang perlu diketahui dari GSAP?Tween Tween pada GSAP berperan sebagai penggerak animasi. Apa yang dilakukan animasi nantinya, anggap saja Tween seperti setter properti berkinerja tinggi. Kita memberikan bahan objek yang akan dibuat menjadi animasi, mengatur durasinya, dan menggunakan properti apapun sesuai dengan yang diinginkan melalui Tween. Pada saat playhead Tween berpindah ke posisi baru, cari tahu berapa nilai properti yang sesuai untuk digunakan. Metode yang biasa digunakan untuk membuat Tween: Timeline Timeline adalah wadah bagi Tween. Kita dapat memposisikan animasi sesuai dengan yang diinginkan, juga mengontrol seluruh urutan dengan mudah menggunakan metode seperti pause(), play (), reverse (), dll. Buat timeline sebanyak yang kalian inginkan. Metode untuk membuat timeline:
Cara penggunaan:
Kemudian tambahkan Tween dengan menggunakan metode (to(), from(), atau fromTo());
Selain cara diatas, kalian juga dapat menggunakan metode chaining untuk menyederhanakan kode.
Penempatan kontrol dengan Parameter posisi Tentukan dengan tepat dimana animasi akan ditempatkan pada timeline menggunakan parameter posisi opsional. Angka menunjukkan waktu absolut (dalam detik) atau string dengan awalan “+=” atau “-=”, prefik ini nantinya yang akan menunjukkan offset relative terhadap akhir timeline. Misalkan “+=2” akan menjadi 2 detik setelah akhir. Membuat gap selama 2 detik. Label Digunakan untuk menandai bagian tertentu dalam menempatkan animasi pada timeline atau sebagai navigasi selama animasi berjalan. Mengontrol Tween dan Timeline Berikut beberapa metode yang sering digunakan:
Semoga bermanfaat. |