IntermediateAnimasi30 menit22 Mei 2026

Animasi Scroll GSAP, dengan Selera

Scroll reveal yang terasa mahal tanpa bikin pengunjung mual: scoping, stagger, easing, dan kontrak prefers-reduced-motion.

Kerangka selera

Animasi itu bumbu, bukan hidangan utama. Tiga aturan yang saya pegang di setiap situs:

  • Hanya transform dan opacity. Jangan pernah animasikan top, left, width, height — mereka memicu layout di setiap frame.
  • Satu pola entrance per section. Fade-up y: 20 → 0 dengan stagger: 0.1 terasa seperti craftsmanship; lima entrance berbeda terasa seperti kekacauan.
  • Hormati prefers-reduced-motion. Tidak bisa ditawar.

GSAP di React yang scoped dan bersih

useGSAP(() => {
  gsap.fromTo(".card",
    { y: 20, opacity: 0 },
    {
      scrollTrigger: { trigger: containerRef.current, start: "top 85%" },
      y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "back.out(1.5)",
    }
  );
}, { scope: containerRef });

scope memberimu scoping selector dan cleanup otomatis — tidak ada ScrollTrigger bocor saat ganti route.

Easing yang terasa manusiawi

Ease Terasa seperti
power3.out tiba dengan percaya diri
back.out(1.5) pop yang playful
elastic.out(1, 0.5) maksimal sekali per situs

Bounce elastis itu toples rempah, bukan botol saus.

Tutorial