[smooth scroll] Lenis

J.yeon·2024년 1월 3일

Lenis란?🤔

플랫폼을 사용하는 동시에 스크롤 경험을 표준화하고 매우 부드러운 탐색 기능으로 웹사이트를 강화하기 위해 구축된 오픈 소스 라이브러리

사용법🖱️

설치

① 패키지 관리자

$ npm i @studio-freight/lenis

import Lenis from '@studio-freight/lenis'

② 스크립트

<script src="https://unpkg.com/@studio-freight/lenis@1.0.32/dist/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 ScrollTrigger를 같이 사용한다면?

const lenis = new Lenis()

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

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

gsap.ticker.lagSmoothing(0)

사용하면서 생긴 문제🫠

body의 overflow: hidden 소멸

gsap과 같이 사용하면서 lenis 자동wrapper 변경시 문제 발생

body의 overflow: hidden 소멸

lenis를 사용하면 body에 준 overflow: hidden이 소용없어짐을 확인함,
또한 버튼 클릭시 활성화되는 gnb(네비게이션)의 내부에서 스크롤이 되지않는 현상 발생.

해당 문제는 Lenis.github 에 고려사항으로 적어둔 중첩 스크롤 코드를 사용하면 해결된다.

<div data-lenis-prevent>scroll content</div>

<div data-lenis-prevent-wheel>scroll content</div>

<div data-lenis-prevent-touch>scroll content</div>

👇
나같은 경우 gnb내부 스크롤이 되지 않아서,

<nav class="gnb" data-lenis-prevent-wheel>
	<ul>
    	<li></li>
        <li></li>
        <li></li>
	</ul>
</nav>

이런식으로 넣어줬더니 스크롤이 잘 작동되는 걸 확인했다.

gsap과 같이 사용하면서 lenis 자동wrapper 변경시 문제 발생

lenis를 사용하면 스크롤이 적용되는 컨테이너(wrapper)가 자동으로 html로 적용되는데,
UI상 html이 아닌 내부 컨텐츠 div(.wrapper)로 변경해야 하는 상황이었음.

<html lenis lenis-smooth>

Lenis.github 을 보면 Instance settings 에 wrapper 라는 옵션이 있다.

const lenis = new Lenis({
    wrapper: document.querySelector('.container'),
});

단순히 이렇게 변경하면 될 줄 알았더니 마크업상 변경만될 뿐 스크롤이 안먹는다.

이래저래 해결한 방법은👇

[ JS ]

const lenis = new Lenis({
    wrapper: document.querySelector('.wrapper'),
    content: document.querySelector('.inner-wrapper'),
});

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

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

gsap.ticker.lagSmoothing(0);

[ CSS ]

html {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
}
.wrapper {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
}

여기까지 하면 스크롤은 smooth하게 동작이 잘된다.

but...... 추가적으로 발생한 문제🫠

gsap scrollTrigger 작동안됨
html과 .wrapper를 fixed로 띄어서그런지 js 이벤트 리스너(scroll) 가 동작하지 않음
(scroll위치를 못잡음)

gsap scrollTrigger 작동안됨

이건 gsap scrollTrigger의 속성으로 해결했다.
내가 scrollTrigger 넣어준 곳마다 scroller속성값을 넣어줘야한다.

해결👇

scrollTrigger: {
        trigger: 'section',
        scroller: '.wrapper',       
}

scroller 설명

js 스크롤 이벤트 리스너 동작안됨

window자체 스크롤을 하고있는게 아닌, lenis와 gsap으로 강제 스크롤 중이라 scroll위치값을 못읽음.
이벤트 리스너대신 gsap으로 대체 해결가능

해결👇

섹션별로 필요했던 기능들은 아래와 같은 방식으로 변경해주는 걸로 대체함.

ScrollTrigger.create({
    trigger: 'section',
    scroller: '.wrapper',
    start: '0% 0%',
    onEnter: function () {
        $('section .con').addClass('on');
    },
    onLeaveBack: function () {
        $('section .con').removeClass('on');
    },
});

ex) scrollTop값이 0초과일때만 적용되는 header요소는 아래와 같이,

ScrollTrigger.create({
    trigger: '.wrapper',
    scroller: '.wrapper',
    onUpdate: self => {
    	// console.log('progress:', self.progress.toFixed(3));
        if (self.progress.toFixed(3) > 0.5) {
            $('.header').addClass('on');
            
        } else {
            $('.header').removeClass('on');
        }
    },
});

gsap.update 설명
gsap.progress 설명

문제 해결 끝...🫠

J.yeon

개블리셔 꿈꾸는 퍼블의 개발공부🚶‍♀️ 천천히 걸어가는 중

[smooth scroll] Lenis

Lenis란?🤔

사용법🖱️

사용하면서 생긴 문제🫠

[CSS] Contain

Sass (SCSS)

0개의 댓글

관련 채용 정보