Lenis

import Lenis from 'lenis';

// Initialize
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smoothWheel: true,
  wheelMultiplier: 1,
  touchMultiplier: 2,
});

// Animation loop
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

// Scroll to position
lenis.scrollTo(0); // top
lenis.scrollTo(500); // 500px
lenis.scrollTo('#section'); // element

// Events
lenis.on('scroll', (e) => {
  console.log(e.progress); // 0-1
  console.log(e.velocity);
});

// GSAP integration
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const lenis = new Lenis();

lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));

// React
import { ReactLenis } from 'lenis/react';

function App() {
  return (
    <ReactLenis root options={{ duration: 1.2 }}>
      <Content />
    </ReactLenis>
  );
}

// With GSAP ScrollTrigger
import { ReactLenis } from 'lenis/react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

function App() {
  const lenisRef = useRef();

  useEffect(() => {
    function update(time) {
      lenisRef.current.lenis.raf(time * 1000);
    }
    
    gsap.ticker.add(update);
    
    return () => {
      gsap.ticker.remove(update);
    };
  }, []);

  return (
    <ReactLenis ref={lenisRef} root>
      <Content />
    </ReactLenis>
  );
}