barba.js 사용시 페이지이동

Question

barba.js 설정후 페이지이동시 gsap유료플러그인인 ScrollSmoother.js 사용법도 알려주실 수 있으실까요? 아무리 문서들 찾고 ai한테 질문해도 페이지이동시 스무스스크롤효과가 풀리는게 해결이 안되네요..

sales · Answer

감사합니다!! 해결되었습니다!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다.

sales님, barba.js와 GSAP의 ScrollSmoother.js를 함께 사용하여 페이지 전환 시 스무스한 스크롤을 유지하시려는 것 같네요. 이러한 경우 스무스 스크롤 효과가 풀리는 문제는 자주 발생하는 이슈 중 하나입니다. 보통 페이지 전환 처리가 잘못되어 새 페이지 로드 시 스크롤 설정이 초기화되는 문제가 발생합니다.

ScrollSmoother.js를 사용하는 상황에서는 다음과 같은 방법으로 해결할 수 있습니다:

barba.js 설정 확인: 페이지 전환 시, 각 페이지가 로드된 후에 ScrollSmoother를 재설정해야 합니다. barba.js의 afterEnter 훅을 사용하여 새로운 페이지가 로드될 때마다 ScrollSmoother를 다시 초기화하면 해결될 수 있습니다.

ScrollSmoother 재설정 코드: 각 페이지 전환 후 ScrollSmoother를 다시 초기화하는 코드를 추가하세요. 예를 들어, 다음과 같은 형태로 사용할 수 있습니다:

barba.hooks.after(() => {
   if (ScrollSmoother) {
       ScrollSmoother.create({
           wrapper: '#smooth-wrapper',
           content: '#smooth-content',
           smooth: 1.5,
           effects: true
       });
   }
});

Page Transition 시 Scroll 관련 설정 리셋: 페이지 전환이 완료되면 스크롤 관련 설정을 리셋해주어야 합니다. 기존의 스크롤 설정을 제거하고 새로운 설정을 적용해야 하므로, 필요한 경우 기존 스크롤 설정을 무효화 (destroy)할 수 있도록 코드를 작성해 두세요.

유사한 문제를 다룬 게시물들이 존재하니 참고하시면 도움이 될 것입니다:
- barba.js와 GSAP ScrollTrigger를 사용한 페이지 전환 문제
- 스크롤 문제 해결 방법 공유

이렇게 관련된 게시물과 함께 살펴보시면 문제 해결에 도움이 되실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

barba.js 사용시 페이지이동