[GSAP] GSAP 시작하기

📌GSAP란?

The GreenSock Animation Platform

웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. GSAP를 이용해서 멋진 인터랙티브한 웹사이트를 만들 수 있어요😎

GSAP를 이용한 사이트는 아래 링크에서 확인 가능해요! ⤵️
✨ GSAP - showcases

📝 사용방법

GSAP을 사용하기 위해선 GSAP 공식 사이트에서 다운로드하거나 CDN으로 적용하거나 혹은 npm install gsap로 설치할 수 있습니다.

• Download 방법 : https://greensock.com/docs/v3/Installation

• CDN으로 적용 : https://cdnjs.com/libraries/gsap

• NPM 설치 방법 : https://greensock.com/docs/v3/Installation/#npm-club

CDN 적용 예시 ⤵

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js" integrity="sha512-qF6akR/fsZAB4Co1QDDnUXWnaQseLGXoniuSuSlPQK6+aWhlMZcHzkasCSlnWoe+TJuudlka1/IQ01Dnhgq95g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

파일의 종류가 많지만 우선 기본적인 gsap.min.js 만 불러오겠습니다.

📖 GSAP 기본 사용 문법

1. gsap.to()

gsap에서 가장 기본적으로 사용되는 속성으로 animate() 라고 생각하면 이해가 쉽습니다. 타겟 요소 속성에서 지정한 속성 까지 애니메이션 됩니다.

기본 작성 방법

gsap.to("타겟", {
	속성값,
});

🌟 두 가지 필수값인 타겟(target) 과 속성(value) 필요합니다.

타겟(target) : 애니메이션을 적용할 개체를 선택
속성(value) : 애니메이션과 관련된 속성을 설정

예제

위 코드는 .box 라는 요소가 2초동안 x축으로 200px 이동하는 코드입니다!

더 많은 예제와 속성값은 아래의 GSAP 공식 문서에서 확인 가능하니 참고해주세요.
➡️ GreenSock | Docs | GSAP | gsap.to()

2. gsap.from()

from() 은 to와 정반대로 시작값을 정하고 원래대로 되돌아오는 애니메이션을 실행해요.

기본 작성 방법

gsap.from("타겟", {
	속성값,
});

작성 방법은 gsap.to랑 똑같아요.

예제

3. gsap.fromTo()

fromTo 는 from 속성이 시작값으로 세팅되고 to속성이 종료값으로 세팅되어 애니메이션을 실행해요.

기본 작성 방법

gsap.fromTo("타겟", {
	{ 시작 속성: 시작 속성값 },
    { 끝나는 속성: 끝나는 속성값 }
);

예제

4. gsap.timeline()

timeline은 연속적인 애니메이션을 간편하게 설정할 수 있어요.

기본 작성 방법

gsap.timeline("타겟", {
  속성: 속성값
});

timeline 은 애니메이션 전체를 간단하게 제어하고 타이밍을 관리할 수 있어 애니메이션 코드를 모듈화할 수 있어요.

// 일반적인 애니메이션 연속 작업
gsap.to("#id", {x: 50, duration: 1});
gsap.to("#id", {x: 150, duration: 1, delay: 1}); //1초 후에 애니메이션 작동
gsap.to("#id", {x: 100, duration: 1, delay: 2}); //2초 후에 애니메이션 작동

// 타임라인을 이용한 애니메이션 연속 작업
const tl = gsap.timeline();
tl.to("#id", {x: 50, duration: 1});
tl.to("#id", {x: 150, duration: 1});
tl.to("#id", {x: 100, duration: 1});

위와 같이 변수 선언 후 원하는 순서대로 애니메이션을 설정하기도 해요.

예제

4-1. 위치 매개변수

기본적으로 애니메이션은 순서대로 삽입되지만 위치 매개변수를 사용하여 작업이 진행되는 위치를 제어할 수 있어요.

예제

tl.to(element, {x:100})
.to(element, {x:200}, "+=3") // 타임라인 종료 3초 후 (갭)
.to(element, {x:300}, "-=3") // 타임라인 종료 3초 전 (오버랩)
.to(element, {x:400}, 5) // 타임라인 시작으로부터 5초 후 (절대적)
.to(element, {y: -100}, "<") // 이전 트윈 타임라인 시작지점
.to(element, {x: 150, y: -100}, ">") // 이전 트윈 타임라인 종료지점

하나씩 해보는게 이해하는데 좋을거같아요..!

다음 시간에는 GSAP를 이용하여 스크롤 기반의 애니메이션을 만들어보겠습니다!