GSAP이란?
GSAP (GreenSock Animation Platform) 은 JavaScript를 사용하여 웹 애니메이션을 만들기위한 라이브러리이다. GSAP는 다양한 애니메이션 기술을 제공하며, 매우 빠르고 유연하며, 웹 애니메이션 작업을 간단하게 만들어준다.
GSAP는 DOM 요소뿐만 아니라 SVG, 캔버스, WebGL 등 다양한 그래픽 기술에도 적용할 수 있습니다. 또한, GSAP는 자체 타이밍 시스템을 갖고 있으며, 이를 통해 정확한 타이밍과 애니메이션 성능을 보장합니다.
설치방법
공식 사이트에서 받거나 CDN, 혹은 npm install gsap, yarn add gsap으로 설치할 수 있다.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="script.js"></script>
</body>gsap.to()
gsap.to에는 2가지 필수값이 필요하다. 대상과 속성이다.
또한, duration값을 설정하지 않으면 기본 값은 0.5s 이다.(걸리는 시간을 의미함!)
gsap.to("대상","속성")
// 움직이고 싶은 대상을 넣고, 속성 값으로 아래와 같이 x: 200을 주면,
// 대상이 x 좌표 200만큼 이동한다.
gsap.to(".box",{ x : 200 }
// transform: translateX(200) 과 동일하다.See the Pen Untitled by Hisu (@Nevacat) on CodePen.
gsap.to() 심화
https://codepen.io/Nevacat/pen/bGxbQWZ
gsap.to(".box1", { duration: 3, x: 200, opacity: 0.2, ease: 'steps(10)', delay: 2,});
// ease: step() = 움직여야 할 거리를 몇 번에 걸쳐 나눠서 이동할지 정한다.
gsap.to(".box2", { duration: 3, x: 200, rotate: 720, scale: 1.3,});
// rotate를 넣음으로 요소가 3초동안 x로 200만큼 가며 720도를 돌아야한다.
// 또한 3초에 걸쳐 요소의 크기가 1.3만큼 커진다.
gsap.to(".box3", { duration: 3, x: 200, ease: 'elastic', backgroundColor: 'red', width: 300, fontSize: 60});
// ease: "elastic" = 좀 더 유연한 느낌의 애니메이션을 구현한다.
// css로 구현했다면, animation과 @keyframe을 이용하여 긴 코드를 구현해야한다.위의 동작과 같이 css로 작성했을 때 구현하기 길어지는 코드를 gsap을 이용하여 줄일 수 있고,
자바스크립트를 이용하여, 동작시킬 수 있다!
**gsap.from(), fromTo(), set()**
gsap.from() : to와 정반대로 시작값을 정하고 원래대로 되돌아오는 애니메이션이 실행된다.
gsap.fromTo() : from 속성이 시작값으로 세팅되고 to 속성이 종료값으로 세팅되어 애니메이션 효과가 나타난다.
set() : 애니메이션 효과 없이 즉시 변경된다.
https://codepen.io/Nevacat/pen/OJoLarG
gsap.from(".box1", { duration: 3, x: 200, width: 400, opacity: 0.2, ease: 'steps(10)'});
// 시작점 x 200 부터 시작해서 0까지 돌아오는 구조이다.
gsap.fromTo(".box2", { fontSize: 40 }, { duration: 3, x: 300, fontSize: 16 });
// 시작점과 끝점을 정해두는 구조로 시작점 font:40 에서 끝점 font:16으로 3초 동안
// x 300 지점으로 이동하며 폰트가 줄어든다.
gsap.set(".box3", { x: 100, width: 200, backgroundColor: 'skyblue', });
// js의 style을 이용하여 css를 조정한 느낌과 같다.
// 애니메이션이 없고, style 메소드보다 가독성이 좋다**gsap.play(), .pause(), resume(), reverse(), restart()**
버튼을 이용하여 애니메이션을 핸들링할 수 있습니다.
https://codepen.io/Nevacat/pen/qBMWLdK
let box = gsap.to(".box1", { duration: 8, x: 400, width: 400, paused: true, });
document.querySelector("#play").addEventListener("click",()=>{box.play()})
document.querySelector("#pause").addEventListener("click",()=>{box.pause()})
document.querySelector("#resume").addEventListener("click",()=>{box.resume()})
document.querySelector("#reverse").addEventListener("click",()=>{box.reverse()})
document.querySelector("#restart").addEventListener("click",()=>{box.restart()})**TimeLine()**
delay를 이용하지 않고, 애니메이션을 순차적으로 처리해준다.
https://codepen.io/Nevacat/pen/abaoPqa
let tl = gsap.timeline();
// 해당하는 요소에 timeline()을 걸어주면, 순차적으로 애니메이션이 동작한다.
tl.to(".box1", { duration: 3, x: 200, ease: 'steps(10)' });
tl.to(".box1", {duration: 3, y: 200, opacity: 1, });
tl.to(".box1", { duration: 3, x: 0, width: 200, backgroundColor: 'red', });
tl.to(".box1", { duration: 3, y: 0, height: 200, });SrollTrigger란?
스크롤에 따라서 이벤트를 발생시키는 일종의 Trigger를 이야기한다.
해당 기능들을 이용하여 스크롤을 감시 및 제어하여, 그에 따른 이벤트를 동작시키기 위해
쓰는 것으로 GSAP을 쓰는 가장 큰 이유가 되기도 한다.
설치방법
설치 방법은 해당 공식 사이트에서 설치하거나, cdn 사이트에서 ScrollTrigger.min.js 를 가져와서 설치하면 된다.
공식 사이트 .
cdn .
사용방법
gsap.registerPlugin(ScrollTrigger); //먼저 SrollTrigger를 불러온다.
gsap.to(".box2", {
scrollTrigger: { //
trigger: ".box2", // 기준을 뜻함. 즉, .box2가 뷰포트 안에 들어오면 해당 애니메이션이 실행됌
},
x: 400, duration: 2, })토글액션(ToggleAction)
토글 액션이란, 스크롤의 Trigger의 상태를 이야기한다.
이게 무슨 뜻이냐면 trigger로 지정해둔 객체에 대한 상태를 이야기 한다.
ScrollTrigger로 지정한 애니메이션은 기본적으로 한 번 스크롤하면 단 한 번 실행되기 때문에
이런 점을 컨트롤 하려면 토글 액션이라는 것을 알아야한다.
ScrollTrigger.create({
onEnter: //스크롤을 이용하여 해당 trigger 객체에 들어갔을 때.
onLeave: // 해당 trigger 객체에서 떠났을 때
onEnterBack: // onLeave에 도착 후 다시 스크롤을 뒤로 돌렸을 때.
onLeaveBack: // 뒤로 돌린 스크롤이 도착했을 경우
})https://codepen.io/lpla/pen/YzpaQmY
시작과 종료 지점 선택
markers: true // 스크롤의 시작 지점과 끝 지점을 표시해준다.
start: "top center", // **
scrub: true, // 되감기 기능
//Start / End
값을 하나만 넣을 시, viewport 기준 ScrollTrigger의 시작점. 예시) 400px = 스크롤 시작 후 400px 떨어진 시점.
값을 두개 넣을 시
- 첫번째 값 : TOP | CENTER | BOTTOM - Trigger가 시작되는 기준 점
두번째 값 : TOP | CENTER | BOTTOM - Viewport에서 스크롤의 위치
예시) start: top center = 트리거의 윗부분이 viewport기준 중간에 닿았을 때 시작
function으로도 작성 가능하고,https://codepen.io/lpla/pen/LYbdjvJ
Pinning (화면 고정 방식)
pinning도 Scrub만큼 자주 쓰이는 기능으로 핀으로 화면을 고정하는 기능이라고 이해하면 쉽다.
사용법은 pin: true, 혹은 pin: "요소의 Class/ID명" 이다.
특정 element가 고정되도록 만들어주는 속성.
pin: true 시 트리거가 고정된다.
pin: '.selector'시 특정 엘리먼트가 고정된다.
pinSpacing: true시 고정되는 엘리먼트 아래에 padding을 줘서 스크롤이 끝난 후 다음 엘리먼트가 이어서 보일 수 있도록 만들어준다. pinSpacing: "margin" 이렇게 하면 padding 대신 margin을 준다.
snap: 다음 동작이 발생하기 위한 스크롤 지점.https://codepen.io/lpla/pen/abBYXzY
Spinning
Spinning은 스크롤시 화면이 수직이 아닌 수평으로 이동하는 기능을 말한다.
위에서 배운 pin, scrub, snap 모두 쓰이고 심지어 ease: "none" 도 없으면 안된다.
