ScrollMagic은 스크롤 이벤트를 감지하고 웹 페이지의 요소에 자바스크립트 애니메이션을 적용하는 기능을 제공하는 라이브러리입니다. 이를 사용하면 사용자가 스크롤을 통해 특정 위치에 도달할 때마다 애니메이션이 트리거되어 웹 페이지에 동적인 효과를 추가할 수 있습니다.

ScrollMagic 설치

먼저, ScrollMagic을 사용하기 위해 npm을 사용하여 설치해야 합니다. 다음 명령어를 사용하여 ScrollMagic 패키지를 설치합니다.

npm install scrollmagic

ScrollMagic 기본 사용법

ScrollMagic을 사용하기 위해 다음 세 가지 단계를 거쳐야 합니다.

1. ScrollMagic 객체를 생성합니다.
2. Scene을 생성하여 요소와 원하는 애니메이션을 연결합니다.
3. 애니메이션 옵션을 설정하고 트리거를 정의합니다.

다음은 ScrollMagic의 기본 사용 예시입니다.

// ScrollMagic 객체 생성
var controller = new ScrollMagic.Controller();

// Scene 생성
var scene = new ScrollMagic.Scene({
    triggerElement: "#element",
    triggerHook: "onEnter", // 요소가 화면에 들어올 때 애니메이션 트리거
    duration: "100%", // 요소의 높이만큼 스크롤링할 때까지 애니메이션 실행
})
.setTween(TweenMax.from("#element", 1, {opacity: 0, scale: 0.5})) // 애니메이션 옵션 설정
.addTo(controller); // 컨트롤러에 Scene 추가

위 코드는 “element”라는 id를 가진 요소가 화면에 들어올 때 애니메이션이 시작되는 예시입니다. 애니메이션은 요소의 투명도와 크기를 조절하는 TweenMax를 사용하여 구현되었습니다.

추가적인 설정 및 옵션

ScrollMagic은 다양한 설정 및 옵션을 제공하여 사용자가 원하는 기능을 구현할 수 있습니다. 몇 가지 유용한 옵션에 대해 알아보겠습니다.

트리거 훅 설정

Scene을 생성할 때 triggerHook 속성을 사용하여 언제 애니메이션을 트리거할지 정할 수 있습니다. 기본값은 “onEnter”로, 요소가 화면에 들어왔을 때 애니메이션이 트리거됩니다. 다른 훅으로는 “onCenter”, “onLeave” 등이 있으며, 원하는 효과에 맞게 선택할 수 있습니다.

트리거 출발점 설정

Scene을 생성할 때 triggerElement 속성을 사용하여 애니메이션이 트리거될 요소를 선택할 수 있습니다. 요소는 CSS 선택자를 사용하여 지정할 수 있으며, 특정 클래스나 id를 가진 요소를 선택할 수 있습니다.

스크롤 범위 설정

Scene을 생성할 때 duration 속성을 사용하여 애니메이션이 스크롤될 범위를 설정할 수 있습니다. “100%”로 설정하면 요소의 높이만큼 스크롤할 때까지 애니메이션이 실행됩니다.

결론

ScrollMagic을 사용하면 웹 페이지에 동적인 효과를 추가하여 사용자 경험을 향상시킬 수 있습니다. 스크롤 위치에 따라 자바스크립트 애니메이션을 동작시키려면 ScrollMagic의 기본 사용법과 옵션 설정 방법을 잘 이해해야 합니다. 이를 통해 멋진 애니메이션 효과를 구현할 수 있습니다.

참고 자료: ScrollMagic 공식 문서