[GSAP] GSAP 기본 문법 (Green Sock basic) - to(), from(), fromTo()

gsap

 

[GSAP] GSAP 기본 문법 (Green Sock basic) - to(), from(), fromTo()

 

들어가기 전

🧐 GSAP(Green Sock Animation Platform)이란?

인터랙티브 웹을 위한 필수 요소를 따지자면 화려한 애니메이션과 스크롤 이벤트를 빼놓을 수 없을 것이다.
하지만 순수 CSS와 바닐라 자바스크립트로 구현하기엔 많은 어려움이 있기 때문에, 인터랙티브 한 웹을 좀 더 수월하게 구현할 수 있도록 도와주는 것이 바로 GSAP이다.
GSAP는 자바스크립트 애니메이션 라이브러리로, 디자이너나 개발자들이 손쉽게 타임라인 기반의 애니메이션을 만들 수 있도록 도와주는 강력한 라이브러리이다.
타깃 오브젝트의 가속성, 형태 변화, 위치 변경, 연속성 등 다양한 효과를 쉽게 줄 수 있을뿐더러 제이쿼리보다 훨씬 빠르기까지 하다.
오늘은 GSAP의 기본 메서드 몇가지에 대해서 알아보려 한다.

🕹️ 목차

1. 설치 방법

2. 기본 메서드

• to()
• from()
• fromTo()

 

 

---

1. GSAP 설치 방법

 

GSAP 설치는 CDN, NPM, 다운로드 파일을 직접 연결하는 등 각자 편한 방법으로 진행하면 되는데, 기본 학습을 위한 목적이라면
간편하게 CDN을 연결해서 사용하면 된다.
GSAP 설치 링크는 아래와 같다.

 

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

Docs

 

GSAP installer

위 리스트에서 GSAP의 다양한 플러그인을 필요한 것들만 선택해서 불러와도 되고,
기본 문법만 공부할 예정이라면 아무것도 선택하지 않은 기본 CDN 코드만 가져와서 html 하단에 붙여 넣은 뒤 사용해도 된다.

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

 

 

 

2. 기본 메서드

 

2-1. to()

to() 메서드는 타겟 엘리먼트의 끝 값을 지정하는 가장 기본적인 메서드로 애니메이션 시작 후 종료되는 값을 지정해주는 메서드이다.
기본 문법은 아래와 같다.

 

gsap.to(el, {
  ...
});

 

x, y 좌표뿐만 아니라 CSS 속성도 값으로 전달하여 타깃 엘리먼트의 위치나 속성 값을 쉽게 변경할 수 있다.
하단 예제를 보면 이해가 좀 더 빠르다.

 

자바스크립트로 엘리먼트의 위치값을 받아오려면 window의 innerWidth와, resize 이벤트를 활용하여 계산해주었을 부분들을
position: absolute / left 100% / transform: transformX(-100%) 이 세 가지 속성만으로 반응형 대응이 가능하며,
타깃 엘리먼트의 형태도 3초 동안 서서히 사각형에서 원형으로 변형된 상태로 애니메이션이 종료된 것을 볼 수 있다.

 

2-2. from()

from() 메서드는 to() 메서드와는 반대로 시작점을 지정할 수 있다.
즉 어떤 상태에서 시작할지 선언을 해준다고 보면 되는데 기본 문법도 to() 메서드와 비슷하다.

 

gsap.from(el, {
  ...  
});

 

아마 시작점을 지정한다는 말이 이해가 조금 어려울 수 있다. 한 번 아래 예제를 봐보자.

 

 

box2 부분에 애니메이션 초깃값을 별도로 설정하지 않았음에도 불구하고,
from() 메서드에서 지정한 값을 전달받아, box2의 각도가 45 deg, scale은 0.5, left 값은 0이고, opacity: 0인 상태로 3초 동안 애니메이션이 실행된 뒤 원래의 박스 형태로 종료된 것을 확인할 수 있다.

 

2-3. fromTo()

formTo()는 타겟 엘리먼트의 시작과 끝을 함께 지정해주는 메서드이다.
문법과 예제를 봐보자.

 

gsap.fromTo(el, {
    //엘리먼트 애니메이션 시작값, 예) opacity: 0
  }, 
  {
  //엘리먼트 애니메이션 종료값, 예) opacity: 1
});

 

 

 

위와 같이 타겟 엘리먼트의 시작 ~ 끝 애니메이션을 동시에 설정해줄 수 있다.

 

---

 

🙇‍♀️🙇‍♀️ 끝마치며 🙇‍♀️🙇‍♀️

문법은 매우 간단한 반면에, fromTo()와 CSS만으로도 다양한 애니메이션을 만들 수 있기 때문에 계속해서 만져봐야 할 것 같다.