[GSAP] GSAP 기초 사용법(문법) 정리

 

const myTween = gsap.to('.element', { duration: 2, // 애니메이션 지속 시간 (초) x: 100, // x 좌표를 100px로 변경 opacity: 0.5 // 투명도를 0.5로 변경 });

GSAP는 타임라인 기반의 애니메이션 자바스크립트 라이브러리로 지금도 여러 곳에서 사용 중이다.

그래서  GSAP의 기초 사용법을 정리해보자!

 

 

https://gsap.com/

Homepage | GSAP

 

GSAP 사이트를 들어가자마자 여러 애니메이션이 눈에 띄게 보인다.

이런 걸 보면 너무 두근거리더라!

아래에 적힌 링크를 들어가면 여러가지 자세한 설명이 나오니 자세하게 확인하고 싶은 사람은 참조하시면 좋다.

 

https://gsap.com/docs/v3/Installation

Installation | GSAP | Docs & Learning

 

GSAP 라이센스 (무료? 유료?) 

GSAP는 무료이지만 그렇다고 막 사용하면 안된다. 

왜냐하면 일부 플러그인은 유료이기 때문이다.

 https://gsap.com/pricing/ 에 들어가보면 적혀있듯 공용 플러그인을 제외한 보너스 플러그인들은 유료로 나오니 상업적 용도로 사용한다면 특히 라이센스를 확인해 보는 것이 좋다.

GSAP 무료 플러그인과 유료 플러그인

Codepen에서는 모두 무료로 사용해볼 수 있지만,  해당 이미지에 보면  Free Plugins(무료)와 Club GSAP(유료) 으로 나누어져 있다.

 

여기서 우리는 주로 사용하는 플러그인들을 위주로 정리할 것이다.

 

 

 

 

GSAP 설치

• npm

npm install gsap

import { gsap } from "gsap"; 

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

 

gsap 설치 후 import로 불러온 뒤 같이 사용할 gsap 플러그인을 import 하는 방식이다.

 

• yarn

yarn add gsap

설치만 다를 뿐 import는 같은 형식으로 하면 된다.

 

• cdn

<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>

gsap, 같이 사용할 gsap 플러그인을 연결하는 방식이다.

 

• zip ( 다운로드 )

 

여기선 간단한 연습이니 cdn 방식을 사용한다.

 

 

 

Tweens

GSAP Tween은 GSAP에서 애니메이션을 만들고 제어하는데 사용되는 객체로,  특정 요소의 특정 속성들에 대한 애니메이션을 정의하면서 이를 통해 요소의 상태를 부드럽게 변경할 수 있다.

기본적인 Tweens을 만드는 세가지 주요 방법

먼저 gsap를 주기 전 css만 준 상태이다. 이제 여기에 위의 것들을 추가해보자.

 

gsap.to() 

gsap.to("h1", { rotation: 45, x: 100, duration: 5 }); 
//h1을 45deg 돌리고 가로로 100px이동을 5초 동안 실행한다

 

 

 

gsap.from()

gsap.from("h1", { opacity: 0, y: 100, duration: 1 }); 
//h1을 투명도 0, 세로로 100px에서 1초 동안 움직이게 실행한다.

 

 

 

gsap.fromTo()

gsap.fromTo("h1", { opacity: 0, y: 100 }, { opacity: 1, rotation: 45, x: 100, duration: 5 }); 
//투명도 0, 세로 100px에서 시작해서 투명도 1, 45deg 돌리고 가로로 100px 이동을 5초 동안 실행

 

 

 

 

정리하면 아래와 같다. 

• gsap.to() : 움직임의 끝나는 점 명시 
• gsap.from() : 움직임의 시작점 명시 
• gsap. from To() : 움직임의 시작점과 끝나는 점 명시

Tween 생성 

const myTween = gsap.to('.element', { 
    duration: 2, // 애니메이션 지속 시간 (초) 
    x: 100, // x 좌표를 100px로 변경 
    opacity: 0.5 // 투명도를 0.5로 변경 
});

 

Tween 속성

• duration (지속 시간) : 애니메이션의 지속 시간을 초 단위로 지정.
• delay (지연 시간) : 애니메이션이 시작되기 전에 대기하는 시간을 초 단위로 지정.
• ease (가속/감속 함수) : 애니메이션의 가속과 감속을 조절하는 함수를 지정.
• onComplete (애니메이션 완료 시 콜백 함수) : 애니메이션이 완료된 후 실행할 콜백 함수를 지정.
• stagger : 애니메이션이 실행될 여러 대상이 있는 경우 대상들 사이에 간격을 조정.
• yoyo : 애니메이션 반복 ( true는 트윈이 앞뒤로 이동하고 반복할 때마다 앞뒤로 교대로 이동 )

Tween 실행

myTween.play(); // 애니메이션 실행

Tween 객체를 생성한 후에는 play() 메서드를 사용하여 애니메이션을 실행한다.

Tween 일시 정지 및 다시 시작

myTween.pause(); // 애니메이션 일시 정지 
myTween.resume(); // 일시 정지된 애니메이션 다시 시작

Tween 객체를 사용하여 애니메이션을 일시 정지하고 다시 시작한다.

Tween 역방향

myTween.reverse(); // 애니메이션을 역방향으로 실행

Tween을 역방향으로 실행하려면 reverse() 메서드를 사용한다.

Tween 속성 변경

myTween.updateTo({ x: 200, opacity: 1 }, true); // 특정 속성을 변경하여 업데이트

updateTo() 메서드를 사용하여 Tween의 특정 속성을 변경하고 업데이트 한다.

 

 

 

Timelines 

여러 개의 애니메이션을 조합하여 순서대로 실행하고 관리하며 통합적으로 제어가 가능하다.

Timeline 생성

const tl = gsap.timeline();

 

위 코드는 빈 타임라인을 생성한다.

이 타임라인에 애니메이션을 추가하고 원하는 순서대로 실행할 수 있다.

애니메이션 추가

tl
  .to('.element1', { duration: 1, x: 100 }) 
  .to('.element2', { duration: 1, y: 50, scale: 2 }, '-=0.5') 
  .to('.element3', { duration: 1, opacity: 0 }, '+=0.5');

to 메서드를 사용하여 각 요소에 대한 애니메이션을 추가했다.

여기서 +=0.5는 이전 애니메이션보다 0.5초 느리게 시작하라는 것을 의미하고, -=0.5는 이전 애니메이션보다 0.5초 빨리 시작하라는 것을 의미한다.

Timeline(타임라인)에서 애니메이션 제거

tl.killTweensOf('.element2');

특정 요소에 대한 애니메이션을 제거할 수 있습니다.

Timeline(타임라인) 컨트롤

tl.play(); // 타임라인 실행 
tl.pause(); // 타임라인 일시 정지 
tl.reverse(); // 타임라인을 역방향으로 실행 
tl.seek(2); // 타임라인을 지정한 시간으로 이동 
tl.timeScale(2); // 타임라인의 실행 속도를 두 배로 변경

Timeline(타임라인) 콜백

tl.eventCallback('onComplete', myCallbackFunction); //타임라인이 완료된 후에 myCallbackFunction 함수를 실행

중첩된 Timeline(타임라인)

const tlOuter = gsap.timeline(); 
const tlInner = gsap.timeline(); 

tlOuter
        .to('.element1', { duration: 1, x: 100 }) 
        .add(tlInner.to('.element2', { duration: 1, y: 50 })) 
        .to('.element3', { duration: 1, opacity: 0 });

 

 

 

 

타임라인 내에 다른 타임라인을 중첩가능하다. 위의 것을 확인해보면 .element1 > .element2 > .element3으로 실행된다.

 

 

이벤트 

1. onStart 이벤트

Twin이나 Timeline이 시작될 때 콜백함수를 실행할 수 있다.

gsap.to('.element', {
  duration: 1,
  x: 100,
  onStart: () => {
    console.log('애니메이션이 시작되었습니다.');
  }
});

 

 

2. onUpdate 이벤트

Tween이나 Timeline이 업데이트될 때 콜백 함수를 실행할 수 있다.

gsap.to('.element', {
  duration: 1,
  x: 100,
  onUpdate: () => {
    console.log('애니메이션이 업데이트되었습니다.');
  }
});

 

3. onRepeat 이벤트

Tween이나 Timeline이 반복될 때 콜백 함수를 실행할 수 있다.

gsap.to('.element', {
  duration: 1,
  x: 100,
  repeat: 3,
  onRepeat: () => {
    console.log('애니메이션이 반복되었습니다.');
  }
});

 

일단 이것들만 알아도 기본적인 모션은 적용이 가능하다!

 

 

 

https://gsap.com/docs/v3/

docsHome | GSAP | Docs & Learning

이 곳에 들어가면 영어여도 자세한 설명이 나오니 참조!