[TweenMax | GSAP] 트윈맥스 - 기초2 ( GSAP 메소드)

 

공식사이트 : greensock.com/

트윈맥스는, 다양한 애니메이션 모션을 만들기에 수월한 라이브러리다. 

간단한 몇가지만 익혀놔도 다양하게 사용 가능하므로 모션만들일이 많다면 한번쯤 알아놓으면 좋은것같다!

gsap객체는 Tween과 Timeline을 만들고 제어하는 다양한 메서드와 속성이 있다.

Tween	바로 실행되어야하는 간단한 모션만들때 유용
Timeline	다양한 메서드를 사용해 모션을 컨트롤할 수 있습니다.  pause () , play () , progress () , reverse () , timeScale ()  등등

---

아래의 메소드드 들은, gsap의 메소드들입니다.

다양한 메소드가 있지만, 여기서 다룰건 .set(), .to(), .from(), .fromTo, .killTweensOf() 이다.

1 .set()

속성을 즉시 설정한다. 즉 세팅해줄때 사용한다.

 

const test = document.querySelector('.test');
gsap.set(test, {opacity : 0});
 
gsap.to(test, 0.5, {opacity : 1});

- 해석 : css에 따로 설정해주지 않고도, 기본 세팅을 정의해줬고, to를 이용해 모션을 줌

2 .to() 

가장 일반적인 유형이다. 세팅에서 설정으로 실행된다.

//css
.test {
	opacity : 0;
}
 
//js
const test = document.querySelector('.test');
gsap.to(test, 0.5, {opacity : 1});

- 해석 : test의 opacity가 0 에서 0.5초 동안 1로 변하는 코드
   장점 : 직관적이다.

3 .from()

설정에서 세팅으로 실행된다.

//css
.test {
	opacity : 1;
}
 
//js
const test = document.querySelector('.test');
gsap.from(test, 0.5, {opacity : 0});

- 해석 : test의 opacity가 0 에서 0.5초 동안 1로 변하는 코드
   장점 : 세팅을 전부 결과값으로 해놨을때 사용하기 편리하다.
            예를들어 test가 1에서 2로 움직여야 할때, 결과를 먼저 보기위해 2의 위치로 세팅해놨을때.
            opacity가 0 -> 1 이 되야하는데, 안보이면 작업하기 힘들어서 1로 세팅해놨을때

4 .fromTo()

from 에서 to로 변한다.
-TweenMax.fromTo(test, 0.5, { from }, { to } )

//js
const test = document.querySelector('.test');
gsap.fromTo(test, 0.5, {opacity: 0}, {opacity : 1});

- 해석 : test의 opacity가 0 에서 0.5초 동안 1로 변하는 코드
   css설정을 따로 해주지 않아도 되는 장점이 있다.

5 .killTweensOf()

tween 준걸 다 죽인다.

//js
const test = documemt.querySelector('.test');
 
gsap.killTweensOf ( test );

- 해석 : test에 적용된 모든 모션을 죽인다. 
   이걸 알아둬야 하는 이유는, 나중에 모션에 repeat, delay 같은걸 줄 경우 set 으로 간단히 없앨 수 없기 때문이다. 
    repeat, delay 을 줬을때 set 으로 간단히 모션을 죽이려하면 렉걸린것같이 움직이는 모션을 발견할 수 있다.

 

 

출처 : https://lily-im.tistory.com/70