[React] React Lenis

KJA·2024년 3월 25일

https://github.com/darkroomengineering/lenis

1. 설치

npm i @studio-freight/lenis

import Lenis from '@studio-freight/lenis'

2. 사용

기본

import Lenis from '@studio-freight/lenis';

const smooth = () => {
  const lenis = new Lenis();


  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);
};

export default smooth;

gsap

import Lenis from '@studio-freight/lenis';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const smooth = () => {
  const lenis = new Lenis({
    lerp: 0.07,
  });

  lenis.on('scroll', ScrollTrigger.update);

  gsap.ticker.add(time => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);
};

export default smooth;