웹사이트 스크롤을 할 때 마우스 휠에 따라 살짝 살짝 끊기는 형태를 많이 보았을 것이다.
이런 부분이 없이 스무스~하게 스크롤이 되도록 하는 라이브러리를 찾아 기록해두려 한다.

위의 이미지와 같이 일반적인 스크롤 할 때의 모습은 이러하다.

---

하지만!!!

lenis 라이브러리를 사용한다면 아래와 같이 스무스하게 스크롤이 되는것을 볼 수 있다.

---

✅사용방법

<!--js-->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.22/bundled/lenis.min.js"></script>

const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

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

requestAnimationFrame(raf)

<!--gsap-->
const lenis = new Lenis()

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

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

gsap.ticker.lagSmoothing(0)

위의 cdn을 html파일에 넣어주고!
아래 js를 복붙해주면 간단하게 사용할 수 있다!

---

❗문제점 발견 및 수정

페이지 창 온로드시 로딩창을 구현을 했는데,
lenis를 사용하게 된다면 오버플로우 기능이 먹통이 되는 것을 발견하였다!
이때 해결 방안을 찾게되었는데 이 두개면 해결이 된다!

1. lenis.stop();
2. lenis.start();

위의 예시중 gsap을 사용한 개인 프로젝트 코드로 수정을 해보겠습니다.

<!--gsap-->
const lenis = new Lenis()

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

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

gsap.ticker.lagSmoothing(0)

✅lenis.stop();



$(document).ready(function() {
  let progress = $('.progress'); // progress 요소 선택
  let inputs = $(".progress-container").find("label");
  inputs.each(function(index) {
    let time = (inputs.length - index) * 100;
    $(this).css("-webkit-animation", "anim 3s " + time + "ms infinite ease-in-out");
    $(this).css("animation", "anim 3s " + time + "ms infinite ease-in-out");
  });
  setTimeout(function() {
    progress.slideUp(500, function() {
      setTimeout(animateOnLoad, 500);
      
      ✅lenis.start();
    
    });
  }, 100); 
});

페이지 창 온로드시 로딩창일 때는 lenis를 작동하지 않도록 lenis.stop();을 하고,
로딩창이 끝나는 setTimeout 끝 무렵에 lenis.start();을 해주게 되면 이러한 문제점을 해결할 수 있었다.