[Web] GSAP 객체 기본 사용 방법

 

gsap 객체

GSAP는 모션 보간Tween을 하기 위해 gsap 메소드를 사용합니다. Tween은 그럼 어떤 변수를 조작할 수 있을까요? DOM요소가 가지고 있는 대부분의 속성을 조작할 수 있습니다. 우리는 투명도, 위치, 숫자, 문자처럼 변경될 가능한 값을 대부분 움직일 수 있습니다. 트윈을 만드는 세 가지 일반적인 방법을 알아보겠습니다.

• gsap.to()
  • 가장 일반적인 유형으로 대상 값을 어딘가로 다가가게 하는 값입니다.
  • 예제 코드는 box 클래스를 1초 동안 회전(+27도) 및 이동(x+100)시킵니다.
  • gsap는 현재 값을 자동으로 파악합니다. 시작값이 필요하지 않습니다.

gsap.to(".box", {rotation: 27, x: 100, duration: 1});

 

• gsap.from()
  • DOM요소의 현재 위치가 목표 값이고,  y +100에서 +0까지 나아갑니다.
  • .to()와 반대라고 생각하면 쉽습니다.

gsap.from(".box", {opacity: 0, y: 100, duration: 1});

 

• gsap.fromTo()
  • 시작 값과 끝 값을 지정합니다.
  • DOM의 현재 값이 무엇이었던 간에, 애니메이션을 실행하면 같은 결과를 냅니다.

gsap.fromTo(".box", {autoAlpha: 0}, {autoAlpha: 0.5, duration: 1});

 

타임라인

• 타임라인은 애니메이션을 담는 보관함입니다.
• 타임라인은 애니메이션에 순서를 지정하는 툴이라고 보시면 됩니다.
• pause, play, progress, reverse, timeScale 등의 메소드를 지원하므로 편리합니다.
• 타임라인 속에 타임라인을 넣을 수도 있습니다.

                         플레이헤드
|------------타임라인-----▶-----------|
|--트윈1--|               ▶
          |-----트윈2-----▶-----------|

 

타임라인 사용

var tl = gsap.timeline();

// 타임라인을 이용해 박스 클래스를 움직였습니다.
tl.to(".box", {duration: 2, x: 100, opacity: 0.5});

// 박스 애니메이션 하나를 끝내면 다음 박스애니메이션을 수행합니다.
tl.to(".box1", {duration: 2, x: 100})
  .to(".box2", {duration: 1, y: 200})
  .to(".box3", {duration: 3, rotation: 360});
  
tl.to(..., 1.5) // 타임라인의 시작으로부터 1.5초 이후에 시작합니다.
  .to(..., "-=0.75") // 앞 애니메이션과 0.75초 겹칩니다.
  .to(..., "+=1") // 앞 애니메이션이 끝나고 1초 기다립니다.

 

타임라인 사용의 이점

아래처럼 다양한 메소드를 사용하실 수 있습니다. 시퀀스를 제어할 수 있습니다. 아래에서 타임라인을 더 효과적으로 사용할 수 있는 일종의 북마크 기능인 'Label'을 보겠습니다. 라벨과 이런 메소드를 혼용한다면 아주 편리하겠죠?

• pause()
• play()
• progress()
• restart()
• resume()
• reverse()
• seek()
• time()
• duration()
• timeScale()
• kill()

 

라벨

• 라벨을 사용하여 타임라인의 특정 지점을 표시하여 해당 지점에 애니메이션을 배치하거나 재생 중에 탐색할 수 있습니다.

tl.addLabel("step2", 3) // 3초 지점에 step2 라는 라벨을 만듭니다.
  .to(..., "step2") // step 2 라벨부터 시작합니다.
  .to(..., "step2+=0.75") // step2 라벨보다 0.75초 후에 시작합니다.

// 나중에는 step2로 찾아갈 수도 있습니다.
tl.seek("step2");