Skill: gsap-scrolltrigger-pin

Section pin lại tại chỗ khi cuộn tới, cuộn dọc của người dùng được ScrollTrigger đọc và tween thành trượt ngang của một track chứa nhiều slide — kỹ thuật "pinned horizontal-scroll section" chuẩn ngành.

WHAT

Purpose và context

• Purpose: một section pin lại khi cuộn tới, cuộn dọc được GSAP ScrollTrigger chuyển thành trượt ngang của track nhiều slide; mặc định dùng bản gốc nguyên văn ở Rheinmir/uiux-asset.
• Trigger (when to use):
  • Trang cần một section kiểu "gallery ngang" (case study, portfolio, sản phẩm) mà người dùng vẫn chỉ lăn chuột dọc như bình thường.
  • User nói "pin section", "cuộn ngang", "horizontal scroll section", "scroll-driven horizontal", "gsap scrolltrigger", hoặc /gsap-scrolltrigger-pin.
• Non-goals: KHÔNG dùng cho hiệu ứng cuộn nhẹ không cần pin (dùng scroll-effects) hay làm mượt cảm giác cuộn toàn trang (dùng lenis-smooth-scroll) — hai skill đó KHÔNG kéo theo dependency GSAP. Chỉ áp dụng cho MỘT section pin cụ thể.

Mental model

[data-hp-section] > .hp-pin (pin) > [data-hp-track] (tween xPercent, scrub) > [data-hp-slide] × N; end là hàm đo lại track.scrollWidth mỗi refresh(); matchMedia chọn nhánh GSAP hoặc nhánh reduce-motion (CSS cuộn ngang thường).