이번 블로그 포스트에서는 ScrollMagic 라이브러리를 사용하여 페이지 스크롤을 제어하는 방법에 대해 알아보겠습니다. ScrollMagic은 JavaScript 기반의 라이브러리로, 페이지 스크롤 이벤트를 캡처하고 다양한 애니메이션 효과를 적용할 수 있습니다.

ScrollMagic 설치하기

우선 ScrollMagic을 설치해야 합니다. 다음 명령을 사용하여 npm으로 ScrollMagic 패키지를 설치할 수 있습니다.

npm install scrollmagic

ScrollMagic은 GSAP(TweenMax)와 함께 사용되는 경우가 많으므로, 이 라이브러리도 함께 설치해주어야 합니다.

npm install gsap

ScrollMagic 기본 구성

ScrollMagic을 사용하기 위해서는 다음과 같은 기본 구성이 필요합니다.

1. ScrollMagic 컨트롤러 생성
2. Scene 생성
3. Scene에 연결할 애니메이션 효과 생성

먼저 ScrollMagic 컨트롤러를 생성합니다.

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();

다음으로 Scene을 생성합니다. Scene은 특정 지점에서 애니메이션을 트리거하는 역할을 담당합니다.

const scene = new ScrollMagic.Scene({
  triggerElement: '.trigger-element',
  duration: 300,
})
  .setTween('.element', { opacity: 0 })
  .addTo(controller);

위의 예제 코드에서는 .trigger-element라는 클래스를 가진 요소가 스크롤되면 .element라는 클래스를 가진 요소의 투명도가 0으로 변경됩니다. addTo(controller) 메서드를 사용하여 Scene을 컨트롤러에 추가합니다.

추가적인 설정

위의 기본 구성 외에도 ScrollMagic에는 다양한 설정 옵션과 메서드가 있습니다. 다음은 몇 가지 예시입니다.

반복 애니메이션 설정

Scene에 repeat: true 옵션을 추가하여 애니메이션을 반복할 수 있습니다.

const scene = new ScrollMagic.Scene({
  // ...
  repeat: true,
  // ...
});

지연 애니메이션 설정

Scene에 delay: 200 옵션을 추가하여 애니메이션 시작을 지연시킬 수 있습니다.

const scene = new ScrollMagic.Scene({
  // ...
  delay: 200,
  // ...
});

애니메이션 속도 조절

Scene에 velocity: 0.5 옵션을 추가하여 애니메이션 속도를 조절할 수 있습니다. 0.5는 기본 속도의 절반을 의미합니다.

const scene = new ScrollMagic.Scene({
  // ...
  velocity: 0.5,
  // ...
});

마무리

이렇게 ScrollMagic을 사용하여 페이지 스크롤을 제어하는 방법에 대해 알아보았습니다. ScrollMagic은 다양한 설정 옵션과 애니메이션 효과를 제공하여 웹 페이지의 스크롤 이벤트를 효과적으로 활용할 수 있게 해줍니다.

ScrollMagic 공식 문서를 참조하여 더 많은 설정 옵션과 사용 방법을 확인할 수 있습니다.

• ScrollMagic 공식 문서
• GSAP 공식 문서