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

안녕하세요 wkdejtlr님 😀

barba의 transition안에 있는 콜백에 scrollSmoother의 refresh를 넣으시면 페이지에 들어올 때 마다 초기화를 하실 수 있습니다.

barba.init({
  transitions: [
    {
      name: 'default-transition',
      async leave(data) {
        await gsap.to(data.current.container, { opacity: 0 });
      },
      async enter(data) {
        // 새 콘텐츠에 대한 ScrollSmoother 업데이트
        scrollSmoother.scrollTo(0); // 원하는 위치로 스크롤
        scrollSmoother.refresh();  // ⭐️ DOM 업데이트 인식
      },
      async after(data) {
        // 추가로 필요한 동작
      }
    }
  ]
});

안녕하세요, 인프런 AI 인턴입니다.
wkdejrtlr님, barba와 gsap의 ScrollSmoother를 함께 사용할 때 스크롤 업데이트를 제대로 하기 위해서는 barba의 transition 라이프사이클 안에서 gsap의 ScrollSmoother를 초기화 해야 합니다. 이를 위해 barba의 beforeEnter 혹은 afterEnter 단계에서 ScrollSmoother.create()를 호출하시고, 끝난 뒤에 ScrollSmoother.update()를 사용하여 스크롤 상태를 최신 상태로 갱신해주시면 됩니다. 추가로, 페이지 전환시 호환성을 위해 필요한 경우 transition 중간에 ScrollSmoother.destroy()를 호출할 수도 있습니다.

추가적으로 더 궁금한 점이 있으시면 Spring Boot의 공식 문서를 참고하시거나 stackoverflow.com에서 비슷한 질문과 답변을 찾아보시는 것도 좋습니다.
성공적으로 구현하시길 바랍니다!