main-logo

ScrollMagic Plugin & TweenMax

ScrollMagic 플러그인과 TweenMax을 사용해서 인터랙션을 구현해보기

profile
이희원
2021년 05월 23일 · 0 분 소요

스크롤 인터랙션을 구현하는데에 여러가지 방법이 있지만, 그중에도 ScrollMagic 라이브러리를 사용해보겠습니다.

익히는데에 어려움이 있었지만, 익숙해지고 나면 다양하게 응용되어 손쉽게 인터랙션을 구현할 수 있을거라 생각됩니다.


기본 개념 : 초기 설정하기

스크롤매직을 사용하기 위해 script 링크를 넣어줍니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

*애니메이션을 손쉽게 사용하기 위해서 TweenMax와 GSAP를 함께 사용해줍니다.

  • TweenMax : greensock에서 만든 애니메이션 라이브러리


TweenMax 문법 간단하게 알아보기

  • TweenMax.to() : 값을 최종 지점에 보여줌
  • TweenMax.from() : 값을 시작 지점에 보여줌
  • ()괄호안에 들어갈 값 : (target(대상), duration(지속시간), {var}(대상에 부여할 key값);)
  • TimelineMax() : 하나의 애니메이션이 아닌, 1 끝난 후 2 끝난후 3… 식의 타임라인 제작이 가능함


ScrollMagic의 동작원리

  1. ScrollMagic 컨트롤러 생성
  2. 애니메이션 생성
  3. Scene 오브젝트 생성
  4. 애니메이션을 Scene 오브젝트에 추가
  5. Scene 오브젝트를 ScrollMagic 컨트롤러에 추가


예제 구조 만들기

<div id="wrap">
  <div class="ani ani1">
    <h1>Animation1</h1>
  </div>
  <div class="ani ani2">
    <h1>Animation2</h1>
  </div>
  <div class="ani ani3">
    <h1>Animation3</h1>
  </div>
</div>

*ani1~3이라는 class를 가진 섹션 3개를 만들고, 글자를 중앙에 정렬시켜줍니다. 스크롤시 각 자신의 offset값에 도달하면 밑에서 위로 나타나는 듯한 애니메이션을 적용해 줄 것입니다.

image1.png
예제 구조 화면 출력




1. ScrollMagic 컨트롤러 생성

var controller = new ScrollMagic.Controller();




2. 애니메이션 생성

// 애니메이션을 줄 대상에 기본 상태를 설정해줍니다.
TweenMax.set('h1', { opacity: 0, y: 100 });

// 애니메이션을 만들어줍니다.
var tween1 = new TimelineMax()
  .to('.ani1 h1', 4, {
    opacity: 1,
    y: 0,
    ease: Cubic.easeOut,
  })
  .to('.ani2 h1', 4, {
    opacity: 1,
    y: 0,
    ease: Cubic.easeOut,
  })
  .to('.ani3 h1', 4, {
    opacity: 1,
    y: 0,
    ease: Cubic.easeOut,
  });




3. Scene 오브젝트 생성

var scene = new new ScrollMagic.Scene()();




4. 애니메이션을 Scene 오브젝트에 추가

var scene = new ScrollMagic.Scene().setTween(tween1);




5. Scene 오브젝트를 ScrollMagic 컨트롤러에 추가

var scene = new ScrollMagic.Scene({
  triggerElement: '#wrap', //scene이 일어날 트리거를 지정
})
  .setTween(tween1)
  .addTo(controller);

*#wrap에 닿으면 설정해놓은 애니메이션이 순서대로 진행됩니다.

image2.png
스크롤 인터랙션 적용 화면




응용하기

이제 ScrollMagic과 TweenMax를 활용해 인터랙션을 구현하는 원리에 대해서는 어느정도 이해가 되었을 것이라 생각됩니다, 그럼 조금 더 응용해서 인터랙션을 구현해봅시다.


응용하기 (1)마크업에 데이터 값을 부여해주기

<div id="wrap">
  <div class="ani ani1">
    <h1 data-role="animation">Animation1</h1>
  </div>
  <div class="ani ani2">
    <h1 data-role="animation">Animation2</h1>
  </div>
  <div class="ani ani3">
    <h1 data-role="animation">Animation3</h1>
  </div>
</div>

data를 활용해 코드를 작성해 볼 것입니다. 스크롤 인터랙션이 구현될 부분에 data값을 넣어줍니다.


응용하기 (2)ScrollMagic 코드 작성하기

// 변수로 data-role값을 모두 선택
var aniTarget = document.querySelectorAll("#wrap *[data-role='animation']");

// 해당 변수에 기본 값 부여
TweenMax.set(aniTarget, { opacity: 0, y: 100 });

// forEach
aniTarget.forEach(function (el) {
  var tween1 = new TimelineMax().to(el, 4, {
    opacity: 1,
    y: 0,
    ease: Cubic.easeOut,
  });

  var scene = new ScrollMagic.Scene({
    triggerElement: el,
    triggerHook: 0.5,
    duration: '60%',
    reverse: true,
  })
    .setTween(tween1)
    .addTo(controller);
});
  • triggerHook : viewport에 대해 상대적으로 어느 시점에서 보여줄 건지를 설정(0~1)
  • duration : 지속 시간
  • reverse : 역방향


forEach문을 사용하여, trigger값을 el로 지정해줌으로써 애니메이션이 발생 될 대상에 닿으면 애니메이션이 발생되는 코드를 비교적 간단하게 구현할 수 있습니다.


코드펜에서 코드 확인하기






마치며

ScrollMagic은 처음이라 낯설어 어렵다고 느끼는 부분이 많았는데, 조금 익숙해지고 보니 TweenMax를 더 잘 활용하면 다양한 스크롤 인터랙션을 손쉽게 구현할 수 있을 것이라는 생각이 들었습니다. 아직 더 공부해야할 부분이 많으나, 기본 개념을 이해하고 있다면 웬만한 인터랙션을 구현하는데에 있어서는 어려움이 없을 것이라 생각 됩니다.

부족한 글이지만 읽어주셔서 감사합니다 :)


참고문서