ScrollMagic은 JavaScript 라이브러리로, 페이지 스크롤 이벤트에 기반한 애니메이션 효과를 구현할 수 있게 해줍니다. 그러나 기본적으로 ScrollMagic은 스크롤 이벤트에 대한 응답 시간 지연을 가지고 있어, 사용자 경험에 약간의 지연이 발생할 수 있습니다. 이러한 지연을 해결하기 위해 ScrollMagic을 보다 빠르게 동작하도록 설정할 수 있습니다.

ScrollMagic 설정하기

먼저, ScrollMagic을 사용하기 위해 아래와 같이 스크립트 파일을 HTML 파일에 추가합니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

위의 코드에서 gsap.min.js와 animation.gsap.min.js는 ScrollMagic과 함께 사용할 수 있는 애니메이션 라이브러리인 GSAP(GreenSock Animation Platform)의 파일입니다.

응답 시간 지연 해제하기

ScrollMagic의 기본 응답 시간 지연을 해제하기 위해, 다음 코드 조각을 사용하면 됩니다:

var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave', // 스크롤 이벤트 트리거 시점 설정
    reverse: false, // 스크롤 역방향 이벤트 설정
  },
  container: 'body', // ScrollMagic 컨테이너 설정
});

controller.scrollTo(function (newPos) {
  gsap.to(window, { duration: 0.5, scrollTo: newPos });
});

위의 코드에서는 ScrollMagic.Controller 객체를 생성하고 globalSceneOptions를 설정하여 스크롤 이벤트 트리거 시점과 스크롤 역방향 이벤트 설정을 변경합니다. 또한, gsap.to 메소드를 사용하여 ScrollMagic 컨테이너를 설정하고 scrollTo 함수를 호출하여 스크롤 이벤트를 처리합니다.

추가 설정 및 애니메이션 적용

ScrollMagic을 사용하여 애니메이션을 적용하려면, 다음과 같이 Scene 객체를 생성하고 애니메이션을 추가합니다:

var scene = new ScrollMagic.Scene({
  triggerElement: '#element-id', // 트리거 요소 설정
  duration: 300, // 애니메이션 지속시간 설정
})
  .setPin('#element-id') // 요소 고정 설정
  .addTo(controller); // 컨트롤러에 Scene 추가

var tween = gsap.to('#element-id', {
  opacity: 0,
  y: 100,
});

scene.setTween(tween);

위의 코드에서는 ScrollMagic.Scene 객체를 생성하여 트리거 요소와 애니메이션 지속시간을 설정합니다. 또한, setPin 메소드를 사용하여 요소를 고정시키고, addTo 메소드를 호출하여 컨트롤러에 Scene을 추가합니다. 마지막으로, gsap.to 메소드를 사용하여 요소에 대한 애니메이션을 정의하고, setTween 메소드를 호출하여 Scene에 애니메이션을 적용합니다.

이제 ScrollMagic을 사용하여 페이지 스크롤 이벤트에 대한 응답 지연을 해제하고, 애니메이션 효과를 적용할 수 있습니다.

참조:

• ScrollMagic 공식 문서
• GSAP(GreenSock Animation Platform) 공식 문서