Post

GSAP) GSAP에 대해 알아보자

Posted Updated
Preview Image
By parksohyunnn 9 min read

GSAP란?

GSAP은 GreenSock Animation Platform의 약자로, JavaScript로 웹 애니메이션을 작성하는 데 사용되는 강력한 라이브러리입니다. GSAP은 웹 애니메이션을 제작하기 위한 다양한 기능과 유연성을 제공하여 개발자가 웹 사이트나 웹 애플리케이션에 풍부한 인터랙티브 요소를 구현할 수 있도록 도와줍니다.

즉 GSAP은 웹 애니메이션을 작성하는 데 매우 강력하고 유연한 도구로, 웹 개발자들에게 널리 사용되고 있습니다.

GSAP (GreenSock Animation Platform):

  • GSAP는 JavaScript로 웹 애니메이션을 작성하기 위한 강력한 라이브러리입니다.
  • HTML 요소의 다양한 속성을 변경하여 애니메이션 효과를 만들 수 있습니다. 위치, 크기, 회전, 투명도 등의 속성을 조작할 수 있습니다.
  • TweenMax, TimelineMax, Easing 등의 클래스와 메서드를 사용하여 애니메이션을 제어할 수 있습니다. 주로 요소의 속성을 변경하여 특정 동작을 구현하는 데 사용됩니다. 예를 들어, 요소를 이동시키거나 회전시키는 등의 애니메이션을 만들 수 있습니다.
  • GSAP는 웹 애니메이션을 위한 강력한 기능과 크로스 브라우저 호환성을 제공합니다.

GSAP 주요 특징

GSAP은 GreenSock Animation Platform의 약자로, JavaScript로 웹 애니메이션을 작성하는 데 사용되는 강력한 라이브러리입니다. GSAP은 웹 애니메이션을 제작하기 위한 다양한 기능과 유연성을 제공하여 개발자가 웹 사이트나 웹 애플리케이션에 풍부한 인터랙티브 요소를 구현할 수 있도록 도와줍니다.

  1. Cross-browser 호환성: GSAP은 모든 주요 브라우저에서 동작하며, IE 8부터 현재까지의 모든 브라우저를 지원합니다.
  2. 강력한 애니메이션 기능: GSAP은 다양한 애니메이션 기능을 제공합니다. 이동, 회전, 크기 조절, 투명도 변경, 색상 변경 등 다양한 속성을 애니메이션화할 수 있습니다.
  3. Tween 기능: GSAP의 Tween 클래스를 사용하여 객체의 속성을 특정 값으로 시간에 따라 부드럽게 변화시킬 수 있습니다.
  4. Timeline 기능: GSAP의 Timeline 클래스를 사용하여 여러 개의 Tween을 시간에 따라 조절하고 조합하여 복잡한 애니메이션 시나리오를 구성할 수 있습니다.
  5. Easing 기능: GSAP은 다양한 이징(Easing) 함수를 제공하여 애니메이션의 움직임을 조절할 수 있습니다. 가속도, 감속도, 반동 등 다양한 효과를 적용할 수 있습니다.
  6. Plugin 지원: GSAP은 다양한 플러그인을 제공하여 확장된 기능을 사용할 수 있습니다. SVG, CSS, ScrollTrigger 등 다양한 플러그인이 있습니다.


GSAP 기본구조

1. HTML 구조 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Animation Example</title>
    <!-- GSAP CDN 추가 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
</head>
<body>
    <!-- 이동시킬 요소 -->
    <div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>

2. JavaScript로 애니메이션 만들기:

1
2
3
4
5
6
7
8
9

// JavaScript로 애니메이션 작성
// 요소 선택
const box = document.getElementById('box');

// GSAP을 사용하여 애니메이션 설정
// TweenMax.to() 메서드는 요소의 속성을 변경하여 애니메이션을 만듭니다.
// 첫 번째 매개변수는 애니메이션 대상 요소, 두 번째 매개변수는 애니메이션 지속 시간입니다.
// 세 번째 매개변수는 속성 변경을 지정하는 객체입니다. 이 경우, x와 y 속성을 변경하여 요소를 이동시킵니다.
gsap.to(box, {duration: 1, x: 200, y: 200});

이 예제에서는 GSAP의 gsap.to() 메서드를 사용하여 요소를 이동시키는 애니메이션을 만들었습니다. duration 속성은 애니메이션의 지속 시간을 나타내며, x와 y 속성을 사용하여 요소를 이동시켰습니다. GSAP의 TweenMax 클래스를 사용하여 요소를 선택하고 애니메이션을 만들 수 있습니다.

GSAP 사용법

1. GSAP 라이브러리 로드하기:

GSAP 라이브러리를 HTML 파일에 추가합니다. 일반적으로 CDN을 사용하여 라이브러리를 로드합니다.

1

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


2. 애니메이션 만들기:

GSAP를 사용하여 요소의 애니메이션을 만듭니다. 여기서는 요소의 위치를 변경하는 간단한 예제를 살펴보겠습니다.

1
2
3
4
5

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

// GSAP를 사용하여 애니메이션 설정
gsap.to(box, { duration: 1, x: 200, y: 200 });

위 코드는 box 요소를 1초 동안 오른쪽으로 200픽셀, 아래쪽으로 200픽셀 이동시킵니다.


3. 애니메이션 옵션 설정하기:

GSAP의 to() 메서드를 사용하여 요소의 애니메이션을 설정할 때 다양한 옵션을 지정할 수 있습니다. 지속 시간(duration), 이동할 위치(x, y), 회전(rotation), 크기(scale) 등을 지정할 수 있습니다.

1
2
3
4
5
6
7

gsap.to(box, {
    duration: 2,    // 애니메이션 지속 시간 (2초)
    x: 300,         // x축으로 300픽셀 이동
    y: 100,         // y축으로 100픽셀 이동
    rotation: 180,  // 180도 회전
    scale: 1.5      // 크기를 1.5배로 확대
});


4. Easing 사용하기:

GSAP에서는 애니메이션의 이징(Easing)을 지정하여 애니메이션의 움직임을 조절할 수 있습니다. ease, ease-in, ease-out, ease-in-out 등 다양한 이징 함수를 제공합니다.

1
2
3
4
5

gsap.to(box, {
    duration: 1,
    x: 300,
    ease: "bounce"  // 바운스 효과를 사용하여 애니메이션 적용
});

위의 예제는 GSAP의 기본적인 사용법을 보여줍니다. GSAP를 사용하면 요소의 위치, 회전, 크기 등을 손쉽게 애니메이션화할 수 있으며, 다양한 이징 함수를 사용하여 애니메이션의 효과를 조절할 수 있습니다.

GSAP
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github