스크롤 인터랙션을 구현하는데에 여러가지 방법이 있지만, 그중에도 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의 동작원리
- ScrollMagic 컨트롤러 생성
- 애니메이션 생성
- Scene 오브젝트 생성
- 애니메이션을 Scene 오브젝트에 추가
- 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값에 도달하면 밑에서 위로 나타나는 듯한 애니메이션을 적용해 줄 것입니다.
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에 닿으면 설정해놓은 애니메이션이 순서대로 진행됩니다.
응용하기
이제 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를 더 잘 활용하면 다양한 스크롤 인터랙션을 손쉽게 구현할 수 있을 것이라는 생각이 들었습니다. 아직 더 공부해야할 부분이 많으나, 기본 개념을 이해하고 있다면 웬만한 인터랙션을 구현하는데에 있어서는 어려움이 없을 것이라 생각 됩니다.
부족한 글이지만 읽어주셔서 감사합니다 :)