[GSAP] 애니메이션 사용법 (중급 - ScrollTrigger)
Lpla
·2021. 3. 1. 18:42
지난 시간에 GSAP로 애니메이션 효과를 만드는 법을 공부했다.
하지만 어떤 애니메이션 효과를 만들지 만큼 중요한 것이 언제 효과를 보여줄 것인가이다.
내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다.
그렇기 때문에 ScrollTrigger가 중요하다.
설치
공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드한다.
Docs
Documentation for GreenSock Animation Platform (GSAP)
greensock.com
gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! No other library delive
cdnjs.com
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
</body>
스크롤트리거 기본
스크롤을 해서 해당 요소가 보일 때 애니메이션 효과가 나타나도록 하는 것이 목적이다.
이번에는 이미지를 준비해봤다.
CSS
body { background: darkblue; }
.box1 { height: 2000px; }
.box { width: 300px; }
.box2 svg { width: 300px; height: auto; transform: rotateY(180deg)}
svg이미지를 추가하고 스크롤을 하기 위한 충분한 여백을 주었다.
이제 자바스크립트로 이전 시간에 배웠던 GSAP 애니메이션을 실행하는데 이번에는 트리거를 함께 추가해야 한다.
먼저 상단에 gsap.registerPlugin(ScrollTrigger); 로 스크롤트리거 플러그인을 불러오고 gsap.to 내부에 다음 코드를 추가한다.
scrollTrigger: ".box2"
See the Pen GSAP - scrollTrigger (1) - 기본 by lpla (@lpla) on CodePen.
이제 해당 요소가 화면에 보이는 지점에서 애니메이션 효과가 시작된다.
토글액션 (toggleActions)
하지만 여전히 아쉽다. 위 방식은 페이지 로드 후 단 한 번만 실행 가능한 일회성 애니메이션 효과이다.
스크롤을 다시 올렸다가 내려봐도 이미 실행된 애니메이션 효과가 다시 시작되지 않는다.
몇 가지 방법이 있는데 먼저 토글 액션을 알아보겠다.
See the Pen GSAP - scrollTrigger (3) - toggleActions by lpla (@lpla) on CodePen.
이제 스크롤을 움직여보면 이미지가 재시작되거나 반대 방향으로 이동하는 걸 볼 수 있다.
toggleActions은 "onEnter, onLeave, onEnterBack, onLeaveBack" 네 가지로 구성된다.
스크롤과 요소의 위치에 따라서 네 가지 액션이 실행되는 것이다.
이 네 메서드의 의미는 글로 설명하는 것보다 직접 눈으로 보는 것이 낫다.
See the Pen GSAP - scrollTrigger (2) - onEnter & onLeave by lpla (@lpla) on CodePen.
시작/종료 지점 선택
애니메이션이 실행되는 지점은 화면의 하단에 해당 요소의 상단 부분이 보일 때이다.
이 두 지점을 바꾸고 싶다면 start 메서드를 써야 한다.
하지만 그전에 인디케이터를 표시하기 위해 markers: true를 추가한다.
그러면 scroller-start가 화면 최하단에 있고 start가 요소의 상단에 있는 것이 확인된다.
화면의 하단 마커를 중앙으로 옮기려면 start: "top center" 를 추가한다.
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2", {
scrollTrigger: {
trigger: ".box2",
toggleActions: "resume pause reset pause",
markers: true,
start: "top center",
},
x: 400, duration: 4,
});
마찬가지로 요소의 하단에서 start 하고 싶다면 start: "bottom center" 로 바꾸면 된다.
종료 지점 역시 마찬가지다. start 대신 end를 쓰면 된다.
이 end를 이용해서 재미있는 효과를 낼 수 있는데 그것은 잠시 후 알아보도록 하겠다.
Scrub (되감기)
scrub은 간단하면서 자주 쓰이는 기능으로 스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능을 말한다.
즉 애니메이션을 재사용 할 수 있는 기능으로 일회성 애니메이션 효과가 아닌 곳에 사용할 수 있다.
scrub은 '문질러 닦다' 라는 의미인데 크게 와닿지 않고 되감기가 더 적절하지 않을까 싶다.
scrub: true 를 입력해도 되고 true 대신 수치를 입력하는 것이 더 부드럽다.
See the Pen GSAP - scrollTrigger (4) - scrub by lpla (@lpla) on CodePen.
Pinning (화면 고정)
pinning도 Scrub만큼 자주 쓰이는 기능으로 핀으로 화면에 고정하면 기능이라고 이해하면 쉽다.
사용법은 pin: true, 혹은 pin: "요소의 Class/ID명" 이다.
See the Pen GSAP - scrollTrigger (5) - Pinning by lpla (@lpla) on CodePen.
Pinning은 원페이지 스크롤에 쓰인다.
See the Pen GSAP - scrollTrigger (6) - Pinning Section by lpla (@lpla) on CodePen.
이것을 응용하여 다음과 같은 원페이지 스크롤을 만들 수 있다.
See the Pen GSAP - scrollTrigger (7) - Pinning Section2 by lpla (@lpla) on CodePen.
gsap.utils는 여러 유용한 기능을 제공하는데 그중에 toArray()는 객체를 배열로 변환시켜 준다.
변환할 배열은 forEach문에 있는 section이고 ScrollTrigger.create() 를 모두 적용했다.
이 부분은 배열과 forEatch문을 공부하면 이해할 수 있지만 몰라도 쓰는데 문제 없다.
pinSpacing을 적용하거나 안하는 두 경우 모두 유용하게 쓸 수 있으므로 모두 사용해보는 것을 추천한다.
Spinning
Spinning은 스크롤시 화면이 수직이 아닌 수평으로 이동하는 기능을 말한다.
위에서 배운 pin, scrub, snap 모두 쓰이고 심지어 ease: "none" 도 없으면 안된다.
See the Pen GSAP - scrollTrigger (8) - Spinning by lpla (@lpla) on CodePen.
마무리
중간부터는 코드가 길어져서 용어 설명이 부족했지만 기능 자체가 직관적이기 때문에 직접 테스트하면 금방 이해할 거라 생각한다.
위 스크롤 트리거 기능을 모두 숙지하더라도 실전에서 직접 써봐야 완벽하게 흡수할 수 있다.
더 깊이 학습하고 싶다면 SVG 애니메이션과 드래그 기능을 추천한다.
이제 나도 배운 것을 바탕으로 실전에 써보도록 하겠다.
