GSAP Overview — Web Animation

GSAP Overview GSAP (GreenSock Animation Platform) adalah library animasi JavaScript yang paling powerful dan mature. GSAP bisa menganimasi hampir apapun — DOM…

GSAP (GreenSock Animation Platform) adalah library animasi JavaScript yang bisa menggerakkan angka apa pun: properti CSS, atribut SVG, sampai properti object JavaScript biasa. Kekuatan utamanya timeline: banyak animasi disusun di satu garis waktu dan dikendalikan dengan satu remote. Bayangin rundown acara nikahan. MC buka di menit 0, sambutan mulai begitu MC selesai, musik masuk sedikit sebelum sambutan berakhir. Tiap mata acara punya jam mulai yang dihitung dari mata acara lain, dan seluruh acara bisa dijeda atau dimundurkan sekaligus.

🧪 Tebakan cepat: Dua baris ini ditulis berturut-turut: gsap.to('.toast', { x: 100, duration: 1 }) lalu gsap.to('.toast', { y: 50, duration: 1 }). Toast-nya bergerak ke kanan dulu, baru ke bawah? Jawabannya ada di bagian "Timeline dan position parameter".

Versi dan lisensi

Per Oktober 2026 versi terbarunya 3.15.0 (13 April 2026). Webflow membeli GreenSock pada akhir 2024, dan sejak GSAP 3.13 (30 April 2025) seluruh GSAP gratis, termasuk plugin yang dulu berbayar (SplitText, MorphSVG) dan ScrollTrigger, juga untuk proyek komersial. Lisensinya "Standard no-charge license", bukan MIT: kamu gak boleh memakai GSAP di dalam tool pembuat animasi visual tanpa kode yang menyaingi Webflow.

npm install gsap

Ukurannya, kami ukur dari paket 3.15.0: inti gsap.min.js 72,9 KB (28,3 KB setelah gzip), plugin ScrollTrigger 44,6 KB (18 KB gzip). GSAP bukan dependensi BelajarWeb.dev, jadi Lab-nya menjalankan timeline kecil buatan sendiri yang menaruh animasi dengan aturan GSAP yang sama, dan mengatakannya terus terang.

Tween: to, from, fromTo

Satu animasi di GSAP disebut tween:

import gsap from 'gsap';

gsap.to('.toast', { y: 0, autoAlpha: 1, duration: 0.2 });          // dari keadaan sekarang KE nilai ini
gsap.from('.room', { y: 16, autoAlpha: 0, stagger: 0.06 });         // DARI nilai ini ke keadaan sekarang
gsap.fromTo('.cek path', { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 0.3 });

Timeline dan position parameter

Setiap gsap.to() mulai saat dipanggil. Dua baris di tebakan jalan bersamaan (paralel), jadi toast bergerak miring. Itu jawaban tebakannya. Mereka gak saling membatalkan karena propertinya beda, dan bawaan GSAP overwrite: false.

Untuk berurutan, pakai timeline. Ini konfirmasi pesanan Homestay Kabut setelah tamu menekan "Ya, pesan":

const tl = gsap.timeline({ paused: true });

tl.to('.modal', { autoAlpha: 0, scale: 0.96, duration: 0.15, ease: 'power1.in' })        // dialog tutup
  .fromTo('.toast', { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.2 }, '-=0.05')
  .fromTo('.cek path', { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 0.3 }, '<0.1')
  .fromTo('.toast .bar', { scaleX: 1 }, { scaleX: 0, duration: 5, ease: 'none' }, '>');

document.querySelector('.ya').addEventListener('click', () => tl.restart());

Argumen terakhir tiap baris adalah position parameter: kapan tween itu mulai.

Position Artinya Toast mulai
(gak ditulis) atau '>' di akhir timeline / akhir tween sebelumnya 150 ms
'-=0.05' 0,05 detik sebelum akhir timeline (tumpang tindih) 100 ms
'+=0.2' 0,2 detik setelah akhir timeline (jeda) 350 ms
'<' bersamaan dengan awal tween sebelumnya 0 ms
'<0.1' 0,1 detik setelah awal tween sebelumnya
2 tepat di detik ke-2 timeline

Dengan '-=0.05', kami jalankan GSAP 3.15.0 dan membaca jadwalnya: dialog 0 sampai 150 ms, toast 100 sampai 300, check-mark 200 sampai 500 ('<0.1' dari awal toast), bar 500 sampai 5.500. Ganti toast ke '<', semua yang sesudahnya ikut maju: toast 0 sampai 200, check-mark 100 sampai 400.

Satu remote untuk semuanya

Timeline dikendalikan seperti satu animasi: tl.pause(), tl.play(), tl.reverse(), tl.seek(0.3) (detik ke-0,3), tl.timeScale(2) (dua kali lebih cepat), tl.restart(), tl.progress(). Mirip remote WAAPI di pelajaran 8, tapi berlaku untuk seluruh urutan sekaligus.

ScrollTrigger, plugin paling populer, mengaitkan tween atau timeline ke posisi scroll:

gsap.registerPlugin(ScrollTrigger);
gsap.from('.room', { y: 16, autoAlpha: 0, stagger: 0.06, scrollTrigger: { trigger: '.rooms', start: 'top 80%' } });

Untuk efek sederhana, scroll-driven animation (pelajaran 7) dan IntersectionObserver (pelajaran 10) sudah cukup tanpa library.

Cara kerjanya: ticker di main thread

GSAP gak memakai CSS animation atau WAAPI. Dia punya satu ticker yang jalan lewat requestAnimationFrame, menghitung nilai tiap tween, lalu menulis style inline di setiap frame. Artinya, sama seperti rAF di pelajaran 6, GSAP ikut berhenti saat main thread sibuk. Kami ukur di Chromium 147, main thread diblokir 500 ms di tengah animasi 1 detik:

Animasi Frame tergambar selama diblokir
CSS transition transform 59
WAAPI transform 60
GSAP x 0

GSAP punya lagSmoothing: kalau jeda antar tick lebih dari 500 ms, dia menganggapnya cuma 33 ms. Jadi setelah diblokir, animasinya melanjutkan dari tempatnya berhenti, bukan meloncat ke posisi seharusnya. Di ukuran kami, GSAP masih menjalankan 103 frame lagi setelah blokir selesai.

Kapan GSAP unggul, kapan gak

GSAP unggul untuk timeline: urutan panjang dengan tumpang tindih, kontrol playback yang presisi (pause, seek, reverse, timeScale), dan hasil yang konsisten di semua browser. Dia juga bisa menganimasikan yang bukan CSS: atribut SVG, angka di object JavaScript untuk canvas atau three.js. Itu jawaban kuis keunggulan GSAP.

Yang bukan keunggulannya: GSAP gak jalan di thread terpisah (justru di main thread), gak dikompilasi jadi CSS keyframes, dan gak membuat width atau height jadi murah; menganimasikan width tetap menghitung layout di setiap frame.

Gak perlu GSAP untuk tombol yang mengecil saat ditekan atau fade satu elemen: transition CSS 100 ms cukup, tanpa 28 KB JavaScript. Dan untuk animasi yang harus tetap mulus saat halaman sibuk, CSS atau WAAPI dengan transform dan opacity lebih kuat.

⚠️ Jebakan yang sering ketemu

TL;DR: GSAP 3.15.0 (gratis termasuk semua plugin sejak 3.13, 30 April 2025, dengan "Standard no-charge license" yang bukan MIT) menganimasikan angka apa pun lewat tween: gsap.to, from, fromTo, durasi dalam detik, bawaan 0,5 detik power1.out; x, y, rotation, scale, autoAlpha. Dua gsap.to() berturut-turut jalan bersamaan; urutan dibuat dengan gsap.timeline() dan position parameter: '>' akhir tween sebelumnya, '<' awalnya, '-=0.05' tumpang tindih, '+=0.2' jeda, '<0.1' setelah awal tween sebelumnya. Satu remote (pause, play, reverse, seek, timeScale) untuk seluruh urutan. GSAP menulis style dari ticker rAF di main thread: diblokir 500 ms, GSAP 0 frame (CSS 59, WAAPI 60), lalu lagSmoothing (jeda lebih dari 500 ms dihitung 33 ms) membuatnya melanjutkan, bukan meloncat. Pakai GSAP untuk urutan rumit, SVG, dan nilai non-CSS; CSS atau WAAPI untuk gerak sederhana yang harus tetap mulus.

Yang akan kamu pelajari