scrub làm gì?

Trong ScrollTrigger, thuộc tính scrub:

crub: true

🔹 Liên kết (sync) animation với scroll position.

---

🔧 2. Hiểu nôm na

• Nếu scrub: false (mặc định) → Animation chạy ngay lập tức khi scroll đến trigger point (giống như add class animate).

• Nếu scrub: true → Animation theo từng pixel scroll, mượt mà và liên tục.

---

✨ 3. Ví dụ dễ hiểu

🚫 scrub: false

jsCopyEditgsap.to(".box", {
  x: 500,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom top",
    scrub: false
  }
});

✔️ Khi .box chạm trigger start, animation bắt đầu chạy tới x:500 dù bạn scroll nhanh hay chậm.

---

✅ scrub: true

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

✔️ .box di chuyển từ x:0 đến x:500 theo đúng phần trăm scroll giữa start-end. ✔️ Nếu bạn scroll ngược, animation cũng chạy ngược.

---

📝 4. scrub có thể là số

crub: 1 // (giây)

🔹 Ý nghĩa: Animation sẽ delay hoặc smooth animation (damped) trong 1 giây thay vì update tức thì, tạo cảm giác mượt mà.

---

🔬 5. Tóm tắt

scrub value	Ý nghĩa
false (default)	Animation chạy khi scroll đến trigger point
true	Sync chặt animation theo scroll position
number (e.g. 1)	Sync + thêm smooth delay (damped easing)

---

💡 Tip thực chiến: Hầu hết scroll-based effect (parallax, horizontal scroll, pinned gallery) đều cần scrub: true để animation đồng bộ với scroll.

---

Nếu bạn muốn, tôi có thể viết full ScrollTrigger cheat sheet (start, end, scrub, pin, anticipatePin) cho lộ trình mastering GSAP tuần này của bạn.