Mengenal dan belajar tentang GSAP

Goo 29 Juli 2022

Mengenal dan belajar tentang GSAP

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.

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?

  • GSAP merupakan library animasi dengan performance tinggi dan super cepat.
  • Berkerja dengan baik bila dipadukan dengan Adobe Animate dan EaseJS melalui GSAP’s EaseJSPlugin
  • Mempunyai segudang fitur untuk membuat animasi yang kompleks dan menarik.
  • Kompatibel dengan setiap browser, library, dan framework.
  • Memiliki kemampuan untuk menganimasi setiap aspek dari sebuah elemen
  • Ringan, tidak memerlukan tools eksternal dan expandable.

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 npm install ./gsap-bonus.tgz atau yarn yarn add ./gsap-bonus.tgz

c. Melalui script tag : Sebelum diceklis : <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>.

Setelah di ceklis : ceklis bagian apa saja yang ingin ditambahkan, contoh pada gambar ini:

91ec074420737d09fe62cecfda0a82f3.png

Script tag berubah menjadi:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollToPlugin.min.js"></script>

<!--
MorphSVGPlugin.min.js is a Club GreenSock perk which is not available on a CDN. Download it from your GreenSock account and include it locally like this:

<script src="/[YOUR_DIRECTORY]/MorphSVGPlugin.min.js"></script>

Sign up at https://greensock.com/club or try them for free on CodePen or CodeSandbox
-->

Tanpa Plugin

Install dengan perintah : npm install gsap atau dengan yarn yarn add gsap

Setelah terinstall, GSAP dapat ditambahkan ke project dengan cara: import { gsap } from "gsap";

Untuk menjalankan GSAP ke halaman HTML, gunakan script tag yang mengarah ke file. contoh: <script src="/[YOUR_DIRECTORY]/gsap.min.js"></script>

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: gsap.to() , gasp.from() , gap.from To() .

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:

gsap.timeline ()

Cara penggunaan:

var tl = gsap.timeline();

Kemudian tambahkan Tween dengan menggunakan metode (to(), from(), atau fromTo());

tl.to(“.box”, {duration: 2, x: 100, opacity: 0,5});

Selain cara diatas, kalian juga dapat menggunakan metode chaining untuk menyederhanakan kode.

//// urutan satu demi satu
tl.to (".box 1", {duration: 2, x: 100}) //perhatikan bahwa tidak ada titik koma!
   .to (".box2", {durationi: 1, y: 200})
  .to (".box3", {duration: 3, rotasi: 360});

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:

pause() ,
play() ,
progress() ,
restart() ,
resume() ,
reverse() ,
seek() ,
time() ,
duration() ,
timeScale() ,
kill()` .

Semoga bermanfaat.

Tags
InfoAnimasigasp
Share to
FacebookTwitterLinkedIn