[gsap] gsap의 기초 (gsap에서 자주 쓰는 코드)

gsap의 기초

greensock 공식문서

gsap의 기초를 설명해주는 유튜브 동영상 강의를 시청하며 정리한 내용이다. 자세한 내용은 아래의 강의링크를 클릭하면 해당 동영상으로 이동할 수 있다.

강의 링크

1강 to, from
2강, timeline
3강, fromTo
4강, stagger
5강, stagger 응용
6강, 스크롤트리거 기초
7강, 스크롤트리거, 토글액션

설치

npm i gsap --save

gsap.to()

gsap.to('적용시킬 대상 class', {
  x: x축으로 이동시키고 싶은 정도(숫자),
  rotation: 회전시키고 싶은 정도(숫자),
  duration: 애니메이션을 적용시킬 시간(숫자),
})

• 상기내용의 재생

gsap.from()

gsap.from('적용시킬 대상 class', {
  x: x축으로 이동시키고 싶은 정도(숫자),
  rotation: 회전시키고 싶은 정도(숫자),
  duration: 애니메이션을 적용시킬 시간(숫자),
})

• 상기 내용의 역재생

gsap.timeline()

• 애니메이션 순차적 적용을 위한 타임라인 생성

let timeline1 = gsap.timeline();
timeline1.to('.box',{duration: 3, x: 500})
.to('.box',{duration: 1, backgroundColor:"pink"},"+=2"); // "+=2" 2초뒤에 실행하라는 뜻
// "-=2" 이렇게 음수로도 적용가능

gsap.to({stagger : ""})

let timeline1 = gsap.timeline();
timeline1.to('.box:nth-child(1)',{duration: 1, y: 100})
timeline1.to('.box:nth-child(2)',{duration: 1, y: 100})
timeline1.to('.box:nth-child(3)',{duration: 1, y: 100})
timeline1.to('.box:nth-child(4)',{duration: 1, y: 100})

• stagger는 위와 같이 순차적으로 애니메이션을 적용하고 싶을 때 사용한다.
• 위와 같은 코드는 stagger를 사용해 아래와 같이 간결하게 작성할 수 있다.

gsap.to('.box',{
  duration: 1, 
  y: 100,
  stagger: 0.5,
})

• 0.5초 간격으로 박스가 순차적으로 내려온다는 의미이다.

gsap.to('.box',{
  duration: 1, 
  y: 100,
  stagger: {
    each: 0.5, // 각각 몇 초동안 실행할 것인지
    from: "end | center | edges", // 애니메이션 시작점 설정가능
    amount: 2, // 2초동안 실행하라
  },
})

• 위와 같이 stagger에도 다양한 옵션이 존재한다.

스크롤 트리거

스크롤에 반응하는 애니메이션을 만드는 데 사용한다.

gsap.registerPlugin(ScrollTrigger); 
// 스크롤 트리거 활성화

• ScrollTrigger를 사용하기 전에는 위와 같이 활성화 코드를 입력해주어야 한다.
• 위의 코드를 작성하지 않으면 ScrollTrigger가 작동하지 않는다.