lenis-smooth-scroll
Installation
SKILL.md
Skill: lenis-smooth-scroll
Thiết lập Lenis làm nền cuộn vật lý (physics-based) cho toàn trang, và đồng bộ đúng cách với GSAP ScrollTrigger — đây là bước hay bị làm sai nhất khi ráp 2 thư viện này chung.
WHAT
Purpose và context
- Purpose: dựng Lenis làm nền cuộn vật lý cho TOÀN TRANG và đồng bộ đúng với GSAP ScrollTrigger (một driver raf, không lệch pha, không giật khi quay lại tab), mặc định bằng bản gốc nguyên văn ở
Rheinmir/uiux-asset. - Trigger (when to use):
- Trang cần cảm giác cuộn "nặng tay/mượt" kiểu Apple/awwwards thay vì cuộn giật cứng mặc định của trình duyệt.
- Trang đã hoặc sẽ dùng GSAP ScrollTrigger (parallax, reveal, pin) và cần Lenis + ScrollTrigger KHÔNG đá nhau (giật, lệch vị trí trigger).
- KHÔNG dùng nếu chỉ cần vài hiệu ứng cuộn nhẹ không cần smooth-scroll nền (dùng
scroll-effects— vanilla, 0 dependency). - KHÔNG dùng để pin/cuộn-ngang một section riêng (đó là
gsap-scrolltrigger-pin) — nhưng nếu trang có cả hai nhu cầu, khởi tạo Lenis theo skill này TRƯỚC, rồigsap-scrolltrigger-pinhoạt động bình thường bên trên vì cả hai đều lấy ScrollTrigger làm trục.- User nói "lenis", "smooth scroll", "cuộn mượt kiểu apple", "physics-based scroll", hoặc
/lenis-smooth-scroll.
- User nói "lenis", "smooth scroll", "cuộn mượt kiểu apple", "physics-based scroll", hoặc
- Non-goals: không pin/cuộn ngang một section (→
gsap-scrolltrigger-pin), không hiệu ứng cuộn lẻ 0-dependency (→scroll-effects), không viết lại code gốc của tác giả.
Mental model
bản gốc (Rheinmir/uiux-asset) → copy nguyên file → chỉ sửa nội dung | nếu không được kéo lib ngoài: assets/ (vanilla rút gọn) → ADAPT. Lõi kỹ thuật: reduced-motion? → không Lenis / new Lenis → driver: 2A raf tự quản (không GSAP) XOR 2B gsap.ticker (có GSAP) → lenis.on('scroll', ScrollTrigger.update) → reveal/data-speed ăn theo cùng driver.