GSAP 기본 문법에 대해 알아보자

GSAP

타임라인 기반으로 애니메이션을 쉽고 빠르게 만들기 도와주며 javascript기반의 라이브러리이다.

• transition 속성을 조작하는 것으로 inline요소에는 동작하지 않을 수 있으니, 최소한 inline-block 속성으로 설정을 요한다.

기본동작

1. to()

to() : 현재 상태에서 애니메이션 동작을 수행한다.

gsap.to('애니메이션대상', {애니메이션 동작})

gsap.to(".box", {
  rotation: 45,
  duration: 10,
  x: 100,
});
// .box의 현재 위치에서부터 10초동안 45도를 돌면서 x축으로 100px 이동한다.

2. from()

from() : 애니메이션 동작에서 현재 위치로 동작을 수행한다.
즉, 애니메이션대상의 css값이 애니메이션의 마지막 지점이다.

gsap.to('애니메이션대상', {애니메이션 동작})

gsap.from(".box", {
  rotation: 45,
  duration: 10,
  x: 100,
});
// .box의 현재 위치에서부터 10초동안 45도를 돌면서 x축으로 100px 이동한다.

3. timeline()

애니메이션을 하나의 묶음으로 재생시키기에 좋은 도구이다.
작성한 순서대로 순차적으로 동작을 수행하게 되며 여러 옵션을 가지고 있다.

주의 : timeline()을 사용하기 위해서는

var tl = gsap.timeline();

• 옵션
  • repeat : -1 -> 애니메이션 무한반복
  • repeat : 양수값 -> 애니메이션 반복 횟수
    
    var tl = gsap.timeline({repeat:-1}) -> 무한반복한다.

을 설정 후 변수tl를 이용해 사용한다.

tl.to(".box", { duration: 5, x: 500 });
tl.to("box", { duration: 5, y: -500 });

• 'box'가 5초동안 x축으로 500px이동한 다음에 5초동안 y축으로 -500px이동하는 애니메이션이다.

• 옵션 : 타이밍 조절
  • +=5 : 지정된 애니메이션이 5초 후에 재생된다.
  • -=5 : 이전 애니메이션이 끝나기 5초전에 지정된 애니메이션이 재생된다.

4. fromTo()

to()와 from()을 묶어놓은 개념으로 연속적인 애니메이션을 한 번에 지정 할 수 있다.

gsap.fromTo('box',{시작점 애니메이션}, {끝나는점 애니메이션})

gsap.fromTo("box", { x: -200 }, { duration: 3, x: 400, y: 0 });

• timeline()에서도 사용가능

5. stagger()

여러개의 요소들을 한번에 제어하는데 도움을 준다.

<div id="demo">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

gsap.to("#domo > .box", {
  y: 100,
  duration: 1,
  stagger: 0.5,
});

• stagger가 없다면 .box가 동시에 한번에 아래로 100px 이동한다.
• 하지만 stagger : 0.5는 0.5초 간격으로 .box들이 순차적으로 아래로 100px씩 내려간다.

• 옵션

gsap.to("#domo > .box", {
  y: 100,
  duration: 1,
  stagger:{
    each : 0.5 //각 0.5초동안 (amount : 2 -> 전체 시간을 설정 가능)
    from : center //가운데부터
         : end //뒤에서 부터
         : edges //끝에서부터
  }
});

자세한 옵션은 https://greensock.com/docs/v3/Staggers 에서 직접 확인 할 수 있디.