gsap stagger 사용방법

gsap에서 반복되는 애니메이션을 한 번에 통제하는 방법을 알려드리도록 하겠습니다.

gsap stagger 조작법

 

사용환경 설정

우선 cdn을 가져와서 붙여준다.

 

gsap cdn 복사하러 가기

 

 

gsap stagger 사용방법

 

stagger 

예제 코드를 드리도록 하겠습니다.

. box css는 알아서 네모 만들어서 테스트해보시길 바랍니다.

 

html 코드

gsap.to(".box", {y:-50, stagger:{
  each:0.2(or amount:1),
  from:"end"
  }
});

 

 

gsap의 stagger의 속성은

. box 클래스를 갖고 있는 코드들에게 동일한 애니메이션을 주면서 시차를 주는 것입니다.

 

each는 왼쪽부터 하나씩 실행되면 0.2의 시차를 갖고 실행됩니다. 

amount:1을 1초 동안 모든 box가 동일한 시차를 갖고 애니메이션이 실행된다.

from: 애니메이션이 시작되는 방향을 말한다.

 

“frist”: 시작지점부터 시작
“end”: 끝지점의 코드부터 시작

”center”: 가운데의 코드부터 시작

”edges”: 양쪽 끝에서 동시 시작

 

 

 gsap 사용법(핵심만 간단)

gsap 사용법(핵심만 간단)

 

gsap 버튼(정지, 재시작, 일시정지..)

gsap 버튼(정지, 재시작,일시정지..)