Mengenal GSAP ScrollTrigger untuk Animasi Web Interaktif

Animasi berbasis scroll dapat mengubah situs web biasa menjadi pengalaman interaktif yang memukau. GSAP ScrollTrigger adalah standar industri untuk hal ini.

Cara Kerja ScrollTrigger

ScrollTrigger menghubungkan progress animasi GSAP (Timeline) dengan posisi scroll halaman pengguna.

javascript

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom top",
    scrub: true
  },
  x: 500,
  rotation: 360
});

Tips Animasi Scroll yang Baik

Gunakan `scrub`: Menghubungkan durasi animasi langsung dengan kecepatan scroll pengguna.

Optimasi Performa: Jangan menganimasikan properti berat seperti width, height, atau top. Gunakan x, y, scale, dan opacity.