ScrollMagic은 JavaScript로 작성된 강력한 라이브러리로, 스크롤 기반 애니메이션을 구현할 수 있게 도와줍니다. 이번 포스트에서는 ScrollMagic을 사용하여 페이지의 상단으로 스크롤하는 방법에 대해 알아보겠습니다.

ScrollMagic 설치

먼저 ScrollMagic을 설치해야 합니다. npm을 사용하는 경우, 다음 명령을 실행하여 ScrollMagic과 필수적인 종속성을 설치할 수 있습니다:

npm install scrollmagic gsap

ScrollMagic은 GSAP(TweenMax) 라이브러리에 의존하기 때문에 함께 설치해야 합니다.

ScrollMagic 설정

ScrollMagic을 사용하기 위해 먼저 필요한 요소들을 페이지에 추가해야 합니다. 애니메이션을 적용하고자 하는 엘리먼트와 해당 애니메이션에 대한 트리거 포인트를 설정해야 합니다.

<div id="trigger"></div>
<div class="section">
  <!-- 페이지 내용 -->
</div>

• trigger 엘리먼트는 상단으로 스크롤할 때 애니메이션을 트리거하는 역할을 합니다.
• section 클래스를 가진 엘리먼트는 실제 스크롤할 컨텐츠가 들어가는 영역입니다.

ScrollMagic 애니메이션 생성

ScrollMagic에 애니메이션을 추가하기 위해 다음과 같이 코드를 작성해야 합니다.

const controller = new ScrollMagic.Controller();
const triggerElement = document.getElementById('trigger');
const section = document.querySelector('.section');

const scene = new ScrollMagic.Scene({
  triggerElement: triggerElement,
  triggerHook: 'onLeave',
  duration: section.offsetHeight
})
.setPin(triggerElement, { pushFollowers: false })
.addTo(controller)
.on('enter', function() {
  window.scrollTo(0, 0);
});

위의 코드 설명:

1. ScrollMagic.Controller()를 사용하여 ScrollMagic 컨트롤러를 생성합니다.
2. triggerElement와 section을 변수에 할당합니다.
3. ScrollMagic.Scene()을 호출하여 새로운 애니메이션을 생성합니다.
4. triggerElement와 section.offsetHeight를 사용하여 애니메이션을 트리거할 요소와 애니메이션의 총 길이를 설정합니다.
5. .setPin()을 사용하여 트리거 요소를 고정시킵니다. pushFollowers: false 옵션을 통해 다른 요소들도 스크롤되지 않게 할 수 있습니다.
6. .addTo()를 사용하여 컨트롤러에 애니메이션을 추가합니다.
7. .on('enter')를 사용하여 애니메이션이 스크롤하면서 화면의 위로 이동할 때 페이지의 상단으로 스크롤되도록 합니다.

이제 페이지를 스크롤하면 trigger 요소가 상단으로 고정되며 페이지의 맨 위로 스크롤될 것입니다.

마무리

이번 포스트에서는 ScrollMagic을 사용하여 페이지의 상단으로 스크롤하는 방법에 대해 알아보았습니다. ScrollMagic은 다양한 스크롤 기반 애니메이션을 쉽게 구현할 수 있는 강력한 도구이므로, 웹 개발에서 활용할 수 있는 다른 기능들도 함께 살펴보시기 바랍니다.