gsap이란?
- The GreenSock Animation Platform의 줄임말로 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 애니메이션 자바스크립트 라이브러리이다.
gsap의 종류
- gsap.to(): 움직임의 끝의 값을 정의
- gsap.from(): 움직임의 시작 값을 정의
- gsap.fromTo(): 움직임의 시작과 끝의 값을 정의
- stagger: 시간차를 두고 애니메이션을 실행하게 해줌
- gsap.timeline: 순차적으로 애니메이션을 구현하고 싶을 때 사용함.
const motion = gsap.timeline({
defaults:{
duration:.5,
delay:0.5
},
paused:true
});
- addLabel(원하는 이름으로 네이밍을 하면된다.): 두가지를 동시에 구현하고 싶을 때 사용함
.addLabel('a')
.to('.box2',{x:200},'a')
.to('.box3',{y:-200},'a')
- scrollTriger: 스크롤을 할 때 애니메이션을 작동되게 하는거
- markers: true or false: 시작과 끝지점을 마킹해준다.
- start: "트리거 윈도우": 시작지점과 윈도우 어느지점에서 만나면 시작할건지를 정하는거
- end: "트리거 윈도우":시작지점과 윈도우 어느지점에서 만나면 끝낼건지를 정하는거
- scrub: ScrollTrigger의 이벤트가 스크롤이 사용될때만 재생되도록 만들어주는 속성으로 스크롤이 멈추면 이벤트도 중간에 멈춘다.
- pin: 특정 element가 고정되도록 만들어주는 속성.