GSAP Scroll Animation — có gu thẩm mỹ | Tutorials

Khung ‘gu thẩm mỹ’

Animation là gia vị, không phải món chính. Ba quy tắc tôi theo trên mọi site:

Chỉ transform và opacity. Đừng bao giờ animate top, left, width, height — chúng kích hoạt layout mỗi frame.
Một pattern entrance mỗi section. Fade-up y: 20 → 0 với stagger: 0.1 trông như tay nghề; năm kiểu entrance khác nhau trông như hỗn loạn.
Tôn trọng prefers-reduced-motion. Không thương lượng.

GSAP trong React có scope và tự dọn dẹp

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 cho bạn scoping selector và cleanup tự động — không còn ScrollTrigger rò rỉ khi đổi route.

Những easing cảm giác ‘con người’

Ease	Cảm giác
`power3.out`	đến nơi tự tin
`back.out(1.5)`	bật ra tinh nghịch
`elastic.out(1, 0.5)`	tối đa một lần mỗi site

Elastic bounce là lọ gia vị, không phải chai nước sốt.