GSAP 滚动动画，恰到好处 | Tutorials

品味框架

动画是调味料，不是主菜。每个网站我都遵守三条规则：

只动 transform 和 opacity。 绝不要给 top、left、width、height 加动画——它们每一帧都会触发布局。
每个区块只用一种入场模式。 y: 20 → 0 的上浮加 stagger: 0.1 显得精致；五种不同入场就是混乱。
尊重 prefers-reduced-motion。 没得商量。

React 中有作用域、可自动清理的 GSAP

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 同时给你选择器作用域和自动清理——路由切换时不会有泄漏的 ScrollTrigger。

有人味的缓动

缓动	感觉
`power3.out`	自信地到位
`back.out(1.5)`	俏皮的弹出
`elastic.out(1, 0.5)`	一个网站最多用一次

弹性回弹是香料罐，不是酱油瓶。