[ JavaScript ] GSAP을 활용한 웹 애니메이션 사용해보기

밤새·2023년 9월 12일

Programming 개념

목록 보기

3/6

오늘은 JavaScript에서 애니메이션 기능을 넣고 싶을 때 쓰는 GSAP에 대해 알아보겠습니다!!

1. GSAP란?

먼저 GSAP는 JavaScript로 웹 애니메이션을 만들기 위한 라이브러리입니다. gsap를 사용하면 웹 페이지의 요소들을 부드럽게 움직이게 하거나 시각적 효과를 추가하는 등 다양한 애니메이션을 만들 수 있습니다.

아래에서 GSAP의 기본 개념과 사용법을 자세히 설명하도록 하겠습니다!

2. GSAP 설치 및 가져오기

GSAP를 사용하려면 먼저 라이브러리를 설치하고 가져와야 합니다. 일반적으로 npm을 통해 설치하거나 CDN을 통해 가져오는 2가지 방법이 있습니다.

2-1) npm으로 설치하기

npm install gsap

2-2) CDN을 통해 가져오기 (HTML 파일 내에서)

   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js"></script>

3. GSAP 기본 사용법

GSAP를 가져온 후, 원하는 요소를 선택하고 애니메이션을 적용할 수 있습니다! HTML에서 다음과 같은 요소를 만들어보도록 하겠습니다.

<div class="box">애니메이션 효과를 주고 싶은 상자</div>

이제 JavaScript로 이 상자를 선택하고 움직이게 만들어 보겠습니다

// 요소 선택
const box = document.querySelector('.box');

// GSAP를 사용한 애니메이션 적용
gsap.to(box, {
  duration: 2,      // 애니메이션 지속 시간 (초)
  x: 100,           // x 축으로 이동
  y: 50,            // y 축으로 이동
  rotation: 180,    // 회전 (도)
  scale: 1.5,       // 크기 조절
  opacity: 0.5,     // 투명도 조절
});

위 코드에서 gsap.to 함수는 선택한 요소(box)에 대해 애니메이션을 정의합니다. 이동, 회전, 크기 조절 및 투명도 조절과 같은 다양한 애니메이션 속성을 설정할 수 있습니다.

코드를 자세히 알아보도록 하겠습니다!

const box = document.querySelector('.box'); : HTML 문서에서 클래스가 "box"인 요소를 선택하고 선택한 요소를 box라는 변수에 저장합니다. 이 요소에 애니메이션을 적용할 것입니다.

gsap.to(box, { ... }); : GSAP의 gsap.to 함수를 사용하여 선택한 요소(box)에 애니메이션을 적용합니다. 이 함수는 선택한 요소에 대한 애니메이션 설정을 인자로 받습니다.

애니메이션 설정 객체 { ... } 안에는 여러 옵션이 있습니다

duration: 2: 애니메이션의 지속 시간을 나타냅니다. 이 예제에서는 2초 동안 애니메이션이 진행됩니다.

x: 100: x 축으로 100px만큼 이동합니다. 따라서 요소가 오른쪽으로 100px 이동합니다.

y: 50: y 축으로 50px만큼 이동합니다. 따라서 요소가 아래로 50px 이동합니다.

rotation: 180: 요소를 180도 회전시킵니다.

scale: 1.5: 요소의 크기를 1.5배로 확대합니다.

opacity: 0.5: 요소의 투명도를 0.5로 설정합니다. 이로 인해 요소가 반투명해집니다.

4. 시퀀스 및 트윈

GSAP를 사용하면 여러 애니메이션을 순차적으로 실행하거나 병렬로 실행하는 것이 가능합니다!

const box = document.querySelector('.box');

// 시퀀스 생성
const timeline = gsap.timeline();
timeline.to(box, { x: 100, duration: 1 });
timeline.to(box, { y: 50, duration: 1 });

// 트윈 애니메이션 (병렬 실행)
gsap.to(box, { x: 100, duration: 1 });
gsap.to(box, { y: 50, duration: 1 });

gsap.timeline을 사용하여 시퀀스를 만들고, gsap.to로 각각의 애니메이션을 정의할 수 있답니다.

코드를 자세히 알아보자면

const box = document.querySelector('.box');: HTML 문서에서 클래스가 "box"인 요소를 선택하고 선택한 요소를 box라는 변수에 저장합니다. 이 요소에 애니메이션을 적용할 것입니다.

const timeline = gsap.timeline();: gsap.timeline()을 사용하여 시퀀스를 생성합니다. 시퀀스는 여러 애니메이션 단계를 순차적으로 실행하는 데 사용됩니다.

timeline.to(box, { x: 100, duration: 1 });: timeline에 첫 번째 애니메이션 단계를 추가합니다. 이 단계에서 box 요소를 1초 동안 x 축으로 100px만큼 이동시킵니다.

timeline.to(box, { y: 50, duration: 1 });: timeline에 두 번째 애니메이션 단계를 추가합니다. 이 단계에서 box 요소를 1초 동안 y 축으로 50px만큼 이동시킵니다. 이 애니메이션은 첫 번째 애니메이션 이후에 실행됩니다.

gsap.to(box, { x: 100, duration: 1 });: 별도의 gsap.to 함수를 사용하여 box 요소에 대한 병렬 트윈 애니메이션을 생성합니다. 이 애니메이션은 timeline의 시퀀스와 별도로 실행되므로 동시에 실행됩니다. 요소를 x 축으로 100px만큼 이동시킵니다.

gsap.to(box, { y: 50, duration: 1 });: 다시 별도의 gsap.to 함수를 사용하여 box 요소에 대한 또 다른 병렬 트윈 애니메이션을 생성합니다. 이 애니메이션도 timeline의 시퀀스와 별도로 실행되므로 동시에 실행됩니다. 요소를 y 축으로 50px만큼 이동시킵니다.

5. gsap() 메소드

gsap.to(): 요소에 애니메이션을 적용합니다.

gsap.to(element, {
  duration: 2,      // 애니메이션 지속 시간 (초)
  x: 100,           // x 축으로 이동
  y: 50,            // y 축으로 이동
  rotation: 180,    // 회전 (도)
  scale: 1.5,       // 크기 조절
  opacity: 0.5,     // 투명도 조절
});

gsap.from(): 요소를 현재 위치에서 시작하지 않고 초기 상태에서 애니메이션을 시작합니다.

gsap.from(element, {
  duration: 2,
  x: -100,          // 초기 위치에서 시작하여 x 축으로 이동
  opacity: 0,       // 초기 투명도에서 시작하여 나타나기
});

gsap.set(): 요소의 초기 상태를 설정하고 애니메이션 없이 해당 상태로 변경합니다.

gsap.set(element, {
  x: 100,           // 초기 위치를 지정
  opacity: 0.5,     // 초기 투명도를 지정
});

gsap.fromTo(): 요소의 시작 상태와 종료 상태를 지정하여 애니메이션을 생성합니다.

gsap.fromTo(element, {
  x: 0,             // 시작 위치
  opacity: 0,       // 시작 투명도
}, {
  duration: 2,
  x: 100,           // 종료 위치
  opacity: 1,       // 종료 투명도
});

gsap.timeline(): 시퀀스를 만들고 여러 애니메이션 단계를 순차적으로 실행할 수 있는 타임라인을 생성합니다.

const timeline = gsap.timeline();
timeline.to(element, { x: 100, duration: 1 });
timeline.to(element, { y: 50, duration: 1 });

gsap.registerPlugin(): GSAP의 플러그인을 등록하여 다양한 기능을 확장할 수 있습니다. 예를 들어, 스크롤 애니메이션을 만들기 위해 ScrollTrigger 플러그인을 등록합니다.
```
gsap.registerPlugin(ScrollTrigger);
```
Easing 함수: GSAP는 다양한 이징 함수(Easing)를 제공하여 애니메이션의 가속도 및 감속을 조절할 수 있습니다. 예를 들어, ease: 'power1.inOut'는 EaseInOut Quad 함수를 사용합니다.
```
gsap.to(element, {
  duration: 1,
  x: 100,
  ease: 'power1.inOut',
});
```

참고하면 좋은 자료

GSAP 공식 문서: https://greensock.com/docs/v3

GSAP 커뮤니티 및 포럼: https://greensock.com/forums/

이렇게 오늘은 gsap의 기초에 대해 알아보았는데요. 다음에는 js 배열을 이용해서 문자가 바뀌는 애니메이션을 만들어보도록 하겠습니다!

밤새

프로젝트를 통해 배운 개념이나 겪은 문제점들을 정리하고, 회고록을 작성하며 성장해나가는 곳입니다 😊