Sự khác biệt giữa scrollTrigger trong gsap.to() và ScrollSmoother.create() (ok)

✅ 1. ScrollTrigger trong gsap.to()

🔹 ScrollTrigger là plugin GSAP dùng để:

• Kích hoạt animation khi scroll đến phần tử.

• Pin phần tử khi scroll.

• Scrub animation theo scroll position.

• Tạo parallax, reveal text, horizontal gallery scroll, v.v.

---

Example

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

✅ Ý nghĩa:

• Khi .box scroll đến center viewport → bắt đầu chạy animation.

• scrub: true làm animation bám sát theo scroll position.

---

🔧 2. ScrollSmoother.create()

🔹 ScrollSmoother là plugin premium của GSAP (bonus plugin), có mục đích khác:

• Tạo smooth scrolling effect (giống locomotive-scroll, lenis)

• Tăng performance bằng transform translateY, không dùng native browser scroll

• Tích hợp dễ dàng với ScrollTrigger để tạo mượt hiệu ứng scroll-triggered

• Hỗ trợ parallax effect cực mượt với data-speed

---

Example

jsCopyEditScrollSmoother.create({
  wrapper: "#smooth-wrapper",
  content: "#smooth-content",
  smooth: 1.5,
  effects: true
});

✅ Ý nghĩa:

• #smooth-wrapper: phần tử wrap toàn bộ trang (fixed height 100%)

• #smooth-content: phần tử chứa nội dung scroll

• smooth: 1.5: độ mượt scroll

---

⚠️ 3. Vậy khác nhau ở đâu?

ScrollTrigger	ScrollSmoother
Dùng để trigger animation khi scroll đến	Dùng để tạo smooth scrolling effect toàn page
Không ảnh hưởng đến native scroll behavior	Thay đổi cách scroll hoạt động (transform translateY)
Có thể scrub animation theo scroll	Làm mượt toàn bộ scroll + parallax
Miễn phí (trong GSAP core plugins)	Premium bonus plugin (Club GSAP)

---

✅ 4. Kết hợp cả 2 thế nào?

🔥 Best practice (production landing page):

jsCopyEdit// Tạo ScrollSmoother trước
const smoother = ScrollSmoother.create({
  wrapper: "#wrapper",
  content: "#content",
  smooth: 1.5,
  effects: true
});

// ScrollTrigger animation
gsap.to(".hero-title", {
  y: -100,
  opacity: 0,
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    end: "+=500",
    scrub: true,
    markers: true
  }
});

✅ ScrollSmoother tạo smooth scrolling, ScrollTrigger trigger animation mượt mà trên smooth scroll đó.

---

🎯 5. Kết luận

• ScrollTrigger: Dùng cho animation khi scroll.

• ScrollSmoother: Dùng để làm mượt scroll toàn trang.

• Cả hai thường dùng kết hợp để tạo landing page animation chuyên nghiệp.

---

Nếu bạn muốn, tôi có thể viết full template landing page với ScrollSmoother + ScrollTrigger + GSAP timeline + gallery horizontal scroll tối ưu production cho dự án của bạn tuần này. Hãy cho tôi biết để tôi triển khai chi tiết.