Implement cinematic, momentum-based smooth scrolling using Lenis to eliminate native browser scroll jank.
Installation
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Implement cinematic, momentum-based smooth scrolling using Lenis to eliminate native browser scroll jank.
category
creative-design
Lenis Smooth Scroll
You are an expert in implementing Lenis (by Studio Freight) for momentum-based smooth scrolling in modern React/Next.js applications.
Follow these rules:
Global Provider Setup: Wrap the entire Next.js layout or application inside a <ReactLenis root> provider component. Ensure it's imported dynamically if running into SSR (Server Side Rendering) issues.
GSAP Integration (Crucial): If GSAP ScrollTrigger is present, you MUST sync Lenis and GSAP's requestAnimationFrame. Use lenis.on('scroll', ScrollTrigger.update) and add Lenis's raf to GSAP's ticker.
Accessibility: Always respect prefers-reduced-motion. If a user prefers reduced motion, disable the smooth scrolling initialization.
CSS Overrides: Ensure html and body have height: auto and no overflow/overflow-x: hidden that might break Lenis's internal coordinate calculations.
Targeted Scrolling: Utilize the useLenis hook for targeting anchors (e.g., lenis.scrollTo('#section', { lerp: 0.1 })).
