🔥 GSAP
GreenSock에서 만든 자바스크립트로 애니메이션을 효과적으로 구현할 수 있는 라이브러리입니다.
요소에게 이동, 회전, 크기 등 여러가지 애니메이션을 적용할 수 있는 TweenMax,
순서/시간에 맞춰 복잡한 애니메이션을 줄 수 있는 TimelineMax,
스크롤의 위치에 따라 애니메이션을 재생시킬 수 있는 ScrollTrigger,
::after, ::before 등 가상 요소에도 접근할 수 있게 CSS 규칙을 동적으로 조작할 수 있는 CSSRulePlugin 등 많은 모듈을 제공합니다.
⭐️ TweenMax
gsap은 기본적으로 to, from, fromTo로 애니메이션을 조작할 수 있습니다.
to: CSS로 작성한 상태에서 애니메이션 시작
from: CSS로 작성된 상태로 애니메이션 종료
fromTo: to, from 상태 모두 애니메이션 적용
💻 Example 01: .to()로 요소를 오른쪽으로 이동시키기
// HTML
<div class="box"></div>
// CSS
.box {
width: 50px;
height: 50px;
background-color: blue;
} gsap.to('.box', {
x: 300
})gsap.to(요소, {애니메이션}) 으로 요소에게 애니메이션을 줄 수 있습니다.
x는 transform: translateX() 속성을 이용해서 움직이는데, 퍼센트 단위로 애니메이션을 적용시키고 싶다면 xPersent 속성을 사용할 수도 있습니다.
💻 Example 02: .from()로 요소를 2배로 만들기
.box {
width: 50px;
height: 50px;
background-color: blue;
transform: scale(2);
}기본 상태의 크기가 2배인 박스가 있습니다.
이 요소의 크기가 1배인 상태에서 2배 상태로 만들기 위해서는 .from()으로 애니메이션을 줄 수 있습니다.
gsap.from('.box', {
scale: 1,
})
💻 Example 03: .fromTo()로 애니메이션 적용하기
fromTo는 기존에 선언했던 CSS 속성을 무시하고, 전 상태(from)과 후 상태(to)를 모두 제어할 수 있습니다
gsap.fromTo('.box', {
//from
x: 50,
}, {
//to
x: 200,
scale: 2,
y: 100,
})
⭐️ TimelineMax
그렇다면 요소들이 순서대로 애니메이션이 작동되어야 할 때는 어떻게 할까요?
gsap.to 또는 gsap.from을 주고 delay, duration으로 순서를 맞춰야 할까요?
간단한 애니메이션이면 쉽겠지만 복잡한 애니메이션일 때는..
정말 간절히 원하면 온 계산기가 나서서 도와준다..
그럴 때 timeline으로 쉽게 애니메이션을 작성할 수 있습니다!
<div class="box pink"></div>
<div class="box blue"></div>
<div class="box green"></div> const tl = gsap.timeline()
tl.to('.pink', {
x: 30
}).to('.blue', {
x: 30
}).to('.green', {
x: 30
})
gsap.timeline()으로 핑크, 블루, 그린 순서대로 x으로 30px 만큼 이동하는 애니메이션을 쉽게 작성할 수 있습니다
그런데 블루가 핑크가 움직인 다음 움직여야 하는 게 아니고, 핑크와 블루가 같이 움직여야 한다면? 어떻게 할까요?
그럴 때는 .addLabel()로 같이 동작되어야 하는 애니메이션을 그룹으로 묶어 줄 수도 있습니다
tl
.addLabel('m1')
.to('.pink', {
x: 30
},"m1")
.to('.blue', {
x: 30
}, "m1")
.to('.green', {
x: 30
}).addLabel('그룹 이름') 을 타임라인에 선언해 주고, 같이 애니메이션이 동작해야 할 요소들에게 그룹을 지정해 주면 됩니다
⭐️ ScrollTrigger
스크롤이 특정 영역에 도달했을 때 애니메이션이 실행되어야 하는 상황은 ScrollTrigger를 통해 쉽게 구현할 수 있습니다
scrollTrigger: {
trigger: 애니메이션이 실행되어야 하는 기준 요소,
start: 애니메이션이 실행되어야 하는 기준점, "요소 스크롤"
end: 애니메이션이 끝나야 하는 기준점, "요소 스크롤"
markers: boolean, 기준점 표시 여부,
scrub: 스크롤 방향에 따라서 애니메이션 실행
...
}scrollTrigger에는 여러 옵션이 있습니다.
trigger와 start는 필수적으로 작성되어야 원활한 애니메이션이 동작하며,
스크롤 애니메이션 구현을 위해 markers는 true로 설정해 애니메이션이 잘 동작하고 있는지도 체크할 수 있습니다
gsap.from('.blue .text', {
fontSize: '12px',
scrollTrigger: {
trigger: ".blue",
start: "top center",
markers: true,
}
}).blue라는 요소의 시작 위치와 스크롤 가운데 부분이 닿으면 애니메이션이 실행됩니다
그외
💡 반복문 사용 (forEach 사용)
gsap.utils.toArray(요소들).forEach((el) => {...})gsap.utils.toArray()는 document.querySelectorAll과 같은 기능을 합니다.
💡 여러 애니메이션을 종합적으로 관리하기
gsap.context()를 통하여 .revert(), .kill() 등을 사용할 수 있습니다
const ctx = gsap.context(() => {
gsap.to(...)
gsap.from(...)
})
// 애니메이션을 즉시 중지하고 싶을 때
ctx.kill()
// 애니메이션을 종료하고(kill) 인라인으로 선언된 style까지 지워 버리고 싶을 때
ctx.revert()
// ctx에 애니메이션을 추가하고 싶을 때
ctx.add(() => {
gsap.to(...)
gsap.from(...)
})💡 gsap.matchmedia를 통해 반응형으로 작업하기
const mm = gsap.matchmedia()
mm.add("(min-width: 1024px)", () => {
// 1024 이상
});
mm.add("(max-width: 1023px)", () => {
// 1023 이하
});
마치며
많이 해 볼수록 느는 녹색 양말!
끝.
