블로그 전체목록

Lenis 부드러운 스크롤 라이브러리 사용법과 GSAP 연동 팁

기술정보 25.11.17 조회 10

Lenis 부드러운 스크롤 라이브러리 사용법과 GSAP 연동 팁

웹사이트의 사용자 경험(UX)을 한 단계 끌어올리고 싶다면, 부드러운 스크롤(smooth scroll)은 필수 요소입니다.

최근 주목받는 라이브러리인 Lenis는 가볍고 안정적인 스크롤 효과를 구현할 수 있습니다.

특히 GSAP 등 스크롤 기반 애니메이션과 함께 사용하면 더욱 강력한 웹 인터랙션을 만들 수 있습니다.

➰➰➰

✅ Lenis 라이브러리란?

Lenis는 웹페이지의 스크롤을 부드럽고 자연스럽게 만들어주는 JavaScript 라이브러리입니다.

모바일과 데스크탑 모두 지원하고, GSAP 같은 애니메이션 라이브러리와도 호환돼서 스크롤 기반 애니메이션을 만들 때도 편리할 뿐만 아니라 누구나 쉽게 적용 가능하다는 장점이 있습니다.

또한 MIT 라이선스 기반의 오픈소스 라이브러리로, 상업용 프로젝트에서도 자유롭게 사용할 수 있습니다. (단, 라이선스 표기는 필수입니다.)

✅ 특히 Lenis가 유용한 홈페이지 유형은?

한 페이지에서 자연스럽게 흐르는 경험을 강조하는 랜딩 페이지,

스크롤에 따라 다양한 애니메이션이 연동되는 모션 중심 프로모션 사이트,

그리고 시각적 완성도가 중요한 디자인 포트폴리오 페이지에서 특히 효과적입니다.

이런 유형의 사이트는 부드러운 스크롤이 전체 경험을 더 세련되고 자연스럽게 만들어 주기 때문에 Lenis의 장점이 잘 드러납니다.

✅ Lenis 라이브러리 사용법은?

1. CDN 연결하기

1
<script src="https://unpkg.com/lenis@1.3.14/dist/lenis.min.js"></script>
cs

2. Lenis 라이브러리 기본 실행 코드
- Lenis는 raf()가 계속 실행되어야 부드러운 스크롤이 유지됨

// Initialize Lenis (=Lenis 초기화)
const lenis = new Lenis({
  autoRaf: true, // requestAnimationFrame 자동 실행 옵션
});
 
// Listen for the scroll event and log the event data 
// 스크롤 이벤트를 감지. 페이지가 얼마나 스크롤됐는지 확인하거나 디버깅할 때 사용(생략가능)
lenis.on('scroll', (e) => {
  console.log(e);
});
 
// Use requestAnimationFrame to continuously update the scroll 
// 부드러운 스크롤을 계속 업데이트
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
 
requestAnimationFrame(raf); // 스크롤 애니메이션 시작

✅ GSAP ScrollTrigger와 함께 쓰기

- GSAP ticker는 초(sec) 단위, Lenis는 밀리초(ms) 단위 → 그래서 time * 1000을 곱해서 단위를 맞춰줌

- 숫자를 더 크게 하면 스크롤 더 부드럽고 더 천천히 움직임

// Initialize Lenis (=Lenis 초기화)
const lenis = new Lenis({
  autoRaf: true,
});
 
// Lenis 스크롤 위치 동기화
lenis.on('scroll', ScrollTrigger.update); 
 
//Gsap의 ticker에 Lenis 스크롤 업데이트
gsap.ticker.add((time) => { 
  lenis.raf(time * 1000); 
});

Colored by Color Scripter

✅ a 태그의 앵커 이동 시에도 적용하기

Lenis 사용 시, href="#section01" 같은 앵커를 클릭하면 브라우저 기본 스크롤이 적용돼서 Lenis의 부드러운 스크롤이 무시될 때가 있습니다.

이때 Lenis에서 제공하는 scrollTo 메서드를 사용하면, 부드러운 스크롤을 그대로 유지하면서 원하는 섹션으로 이동할 수 있습니다.

1. 'data-'속성을 활용해 일치하는 영역 찾아가기

- 메뉴 등에 data-속성으로 id 또는 class 선택자를 활용한 값을 설정합니다. (이동될 영역의 id, class 값과 동일)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<a href="#" class="anchor" data-target="#section01">섹션1 이동</a>
<a href="#" class="anchor" data-target="#section02">섹션2 이동</a>
 
<section id="section01"></section>
<section id="section02"></section>
 
<script>
const lenis = new Lenis({ autoRaf: true });
 
document.querySelectorAll('.anchor').forEach((link) => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 기본 앵커 이동 막기
 
    const target = link.getAttribute('data-target'); // data 속성 값 
    lenis.scrollTo(target); // Lenis 방식으로 부드럽게 이동
  });
});
</script>
Colored by Color Scripter
cs

2. 이동해야하는 section의 id값을 직접 지정한 후, index 매칭시켜 scrollTo 시키는 방법.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<a href="#" class="go">섹션1</a>
<a href="#" class="go">섹션2</a>
<a href="#" class="go">섹션3</a>
 
<section id="section01"></section>
<section id="section02"></section>
<section id="section03"></section>
 
 
<script>
const lenis = new Lenis({ autoRaf: true });
 
// Nav 이동
const menuLinks = document.querySelectorAll('.sh_nav > ul > li > a');
 
// 이동해야 하는 section ID를 직접 지정
const sectionMap = [
    "#section01", // 서비스 소개
    "#section02", // 운영 성과
    "#section03", // 맞춤 솔루션
];
menuLinks.forEach((a, index) => {
    a.addEventListener('click', (e) => {
        e.preventDefault();
 
        const sectionId = sectionMap[index];
        const targetEl = document.querySelector(sectionId);
        if (!targetEl) return;
        lenis.scrollTo(targetEl, {
            duration: 1,
            easing: t => t < 0.5 ? 2*t*t : 1-2*(1-t)*(1-t)
        });
    });
});
</script>
Colored by Color Scripter
cs


➰➰➰

Lenis를 단독으로 사용해도 부드러운 스크롤 효과를 제공하지만, GSAP ScrollTrigger와 함께 사용하면 스크롤 애니메이션 구현 범위가 훨씬 넓어집니다.


✨ 관련 링크 ✨
Lenis 라이브러리
부드러운 마우스 스크롤 효과

 

블로그 전체목록

최근 포스트