강력한 애니메이션 GSAP, 사용법과 예제 정리
GSAP(GreenSock Animation Platform)은 강력한 JavaScript 애니메이션 라이브러리로, HTML, CSS, SVG, Canvas, WebGL등의 요소를 부드럽고 효율적으로 애니메이션할 수 있도록 도와준다.
GSAP의 주요 특징
1. 강력한 성능 : 일반적인 CSS 애니메이션보다 빠르고 부드럽게 작동한다.
2. 다양한 애니메이션 가능 : 위치, 크기, 투명도, 색상, 회전 등 다양한 속성 애니메이션 지원
3. 체이닝(Chaining)과 타임라인(Timeline) 지원 : 여러 애니메이션을 순차적으로 또는 동시에 실행 가능
4. 반응형 지원 : 반응형 웹에서도 문제없이 동작
5. 스크롤 애니메이션 연동 가능 : scrollTrigger 플러그인으로 스크롤 기반 애니메이션 구현 가능
1. GSAP 기본 예제
아래 코드는 .box 요소를 오른쪽으로 이동시키는 간단한 GSAP 애니메이션이다.
기본 애니메이션(gsap.to())
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP 기본 예제</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: tomato;
position: absolute;
top: 50px;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
gsap.to(".box", { x: 300, duration: 2, ease: "power2.out" });
</script>
</body>
</html>- .box 요소가 x:300px 만큼 이동하며, 애니메이션은 2초 동안 진행된다.
- ease: "power2.out"은 애니메이션이 부드럽게 끝나는 효과를 준다.
2. GSAP Timeline 활용
여러 개의 애니메이션을 순차적으로 실행하고 싶다면 gsap.timeline()을 사용할 수 있다.
순차적인 애니메이션(gsap.timeline())
const tl = gsap.timeline();
tl.to(".box", { x: 300, duration: 1 }) // 오른쪽 이동
.to(".box", { y: 150, duration: 1 }) // 아래 이동
.to(".box", { rotation: 360, duration: 1 }); // 회전
- .box가 오른쪽{x:300px}으로 이동
- 이후 아래(y: 150px)로 이동
- 마지막으로 360도 회전
- timeline을 사용하면 자연스러운 애니메이션이 순차적으로 진행됨
3. GSAP ScrollTrigger(스크롤 애니메이션)
GSAP의 ScrollTrigger 플러그인을 사용하면 스크롤과 연동된 애니메이션을 만들 수 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
x: 300,
duration: 2,
scrollTrigger: {
trigger: ".box", // 트리거 요소
start: "top 80%", // 시작 지점 (화면의 80% 위치에서 시작)
end: "top 30%", // 종료 지점
scrub: true // 스크롤을 따라 움직이도록 설정
}
});
</script>
- .box가 사용자가 스크롤을 내릴 때 x: 300px 이동
- scrub : true를 설정하면 스크롤 속도에 맞춰 애니메이션이 실행됨
4. GSAP Stagger(여러 요소 동시에 애니메이션)
여러 개의 요소를 동시에 애니메이션할 때 stagger를 사용하면 일정한 간견을 둘 수 있다.
gsap.to(".box", { y: 100, duration: 1, stagger: 0.2 });- .box가 여러 개 있을 때, 각 요소가 0.2초 간격으로 아래(y:100px)로 이동.
정리
GSAP은 애니메이션을 쉽게 조작할 수 있는 강력한 라이브러리다.
기본적인 GSAP.to(), gsap.timeline(), scrollTrigger, stagger등을 조합하면 다양한 애니메이션 효과를 구현할 수 있다.
React 프로젝트에서도 GSAP을 사용할 수 있으며, useEffect와 함께 사용하면 부드러운 UI 애니메이션을 만들 수 있다.