GSAP는 웹 애니메이션을 쉽게 구현할 수 있게 해주는 강력한 JavaScript 라이브러리이다. 복잡한 애니메이션을 간단하게 만들 수 있도록 도와주며, 성능이 뛰어나고 다양한 브라우저에서 호환된다. GSAP는 주로 다음과 같은 기능을 제공한다.
1. 기본 개념
GSAP는 애니메이션을 구현하기 위한 간단하고 직관적인 API를 제공한다. 타임라인, 트위너, 이징(easing) 등 다양한 기능을 통해 애니메이션을 세밀하게 조정할 수 있다. GSAP는 CSS 애니메이션보다 더 많은 제어를 가능하게 하며, 복잡한 애니메이션 시퀀스를 쉽게 구성할 수 있다.
2. GSAP 설치
GSAP을 사용하기 위해서는 먼저 라이브러리를 설치해야 한다. 아래와 같은 방법으로 설치할 수 있다.
npm을 이용한 설치
npm install gsap
CDN을 이용한 설치
HTML 문서의 <head> 태그 안에 아래 스크립트를 추가하여 사용할 수 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
3. 기본 사용 방법
GSAP의 기본 사용법은 gsap.to()와 gsap.from() 메서드를 사용하는 것이다.
- gsap.to(target, duration, vars): 지정한 요소(target)를 지정한 시간(duration) 동안 지정한 속성(vars)으로 애니메이션을 적용한다.
- gsap.from(target, duration, vars): 지정한 요소를 지정한 시간 동안 지정한 속성에서 시작하여 애니메이션을 적용한다.
예제
<div id="box" style="width: 100px; height: 100px; background: red;"></div>
<script>
gsap.to("#box", 2, { x: 300, rotation: 360 });
</script>
위 예제에서는 빨간 박스를 2초 동안 오른쪽으로 300픽셀 이동시키고, 360도 회전시키는 애니메이션을 적용한다.
4. 자주 사용되는 기능
4.1. 타임라인
타임라인은 여러 애니메이션을 순차적으로 실행할 수 있게 해주는 기능이다. gsap.timeline() 메서드를 사용하여 타임라인을 생성할 수 있다.
예제
const tl = gsap.timeline();
tl.to("#box", 1, { x: 300 })
.to("#box", 1, { rotation: 360 })
.to("#box", 1, { y: 100 });
위 예제에서는 박스가 300픽셀 이동한 후, 360도 회전하고, 마지막으로 100픽셀 아래로 이동하는 애니메이션을 순차적으로 실행한다.
4.2. 이징(Easing)
이징은 애니메이션의 속도를 조절하여 더 자연스러운 움직임을 만들어준다. GSAP에서는 다양한 이징 함수를 제공한다.
예제
gsap.to("#box", 2, { x: 300, ease: "bounce.out" });
위 예제에서는 박스가 2초 동안 오른쪽으로 이동하며, 마지막에 튕기는 효과를 준다.
4.3. 반복 및 역방향
애니메이션을 반복하거나 역방향으로 실행할 수 있다.
예제
gsap.to("#box", { x: 300, duration: 2, repeat: 3, yoyo: true });
위 예제에서는 박스가 300픽셀 이동한 후, 다시 원래 위치로 돌아오는 애니메이션을 3회 반복한다.
결론
GSAP는 웹 애니메이션을 간편하게 구현할 수 있게 해주는 강력한 도구이다. 다양한 기능과 직관적인 API를 통해 복잡한 애니메이션도 쉽게 만들 수 있다.
'IT개발 > JS 관련' 카테고리의 다른 글
| [JavaScript] JavaScript 구조 분해 할당(Destructuring Assignment) (0) | 2025.02.25 |
|---|---|
| [React] React 프로젝트에 prettier & eslint 설치하기 (0) | 2025.02.18 |
| [React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치) (0) | 2025.02.18 |
| [vue] 특정 페이지에서만 특정 클래스 추가하기 (0) | 2025.02.10 |
| [vue] Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점 (0) | 2025.02.10 |
댓글