🐟와 공부하는 GSAP🐣

• 내가 영어의 바다에서 대충 번역하고 이해한걸 옮겨서 틀린 내용이 있을 수 있음!
• 23.08.20 작성
• 23.08.21 추가
• 23.08.22 수정
• 23.08.23 수정
• 23.08.26 추가 및 수정
• 23.09.29 추가 및 수정
• 23.09.30 추가
• 24.03.20 추가

🐡 GSAP

: GSAP(GreenSock Animation Platform)은 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리이다.(크로스브라우징 지원함)
GSAP
CDN

사용법

gsap.메서드(타겟요소, 시간, 옵션)

🐟Tween

: Tween은 애니메이션을 세팅하는 기본 단위!

+)🐣
Tweening은 애니메이션 키프레임 안에서 이미지를 만드는 과정을 뜻해
css로는 transition 준거라고 이해하면 쉬울거야 또는 어렸을 때 수작업으로 만든 애니메이션을 생각해
어떤 값을 transition을 주면 서서히 변하잖아? 그 서서히 변과는 과정이 Tweening!
그리고 그 결과 하나하나의 변하는 연속적인 이미지를 Tween이라고 하고!

Tween 메서드

🐟 gsap.to("요소",시간,{속성}) : 애니메이션의 끝 값을 지정하는 메서드
🐟 gsap.from({"요소",시간,{속성}}) : 애니메이션의 시작 값을 지정하는 메서드
🐟 gsap.fromTo(요소,시간,{시작속성},{끝속성}) : 애니메이션의 시작 및 끝 값을 지정하는 메서드

---

🐟 gsap.Timeline() : 순서대로 애니메이션이 되도록 제어할 수 있는 메서드

+)🐣
자바스크립트와 같이 입력하면 바로 애니메이션이 실행해
A,B,C tween을 만들면 한번에 A,B,C 애니메이션이 실행하는거지
A←B←C 순으로 애니메이션을 실행하고 싶을땐 delay값을 주면 가능하지만
앞의 delay값을 수정하면 뒤에 값도 수정해서 일일이 맞춰야 하잖아
그런 번거로움을 줄일 수 있게 입력한 순서대로 실행되는게 gsap.Timeline()이야!

• 속성 뒤에 숫자 | % 를 넣으면 타임라인 기준으로부터 숫자만큼 전/후 실행된다.
• -= : 이전 애니메이션의 종료 전 실행(중복 실행)
• += : 이전 애니메이션 종료 후 진행(이전 타임라인과 갭 발생)
• "<" : 이전 애니메이션의 시작 전 진행(중복 실행)
• ">" : 이전 애니메이션의 종료 전 진행(중복 실행)

🫡 그래서 이거 언제 왜 쓰는거야?
+)🐣
우린 이제 gsap.Timeline()으로 순차적으로 애니메이션을 짤 수 있지...!
A←B←C←D순으로 짤 수 있지만 A←B=C←D를 해야할 때도 있잖아~
그때 사용하면 편하다!

예시

const tl = gsap.timeline({
 defaults: {duration:1} // tl의 애니메이션은 다 1초씩 설정!
})

tl.to(".box",{y:100})
tl.to(".box",{x:100},"-=0.5") // 앞 타임라인이 끝나기0.5초 전 실행
tl.to(".box",{rotate: 180, borderRadius: "50%"})
tl.to("body",{background:"#aaa"},"<") // 앞 타임라인과 같이 실행
tl.to(".box",{border:"2px solid white"})
tl.to(".box",{scale:1.5})
tl.to(".box",{background:"tomato"},2) // 전체 애니메이션 2초에 바로 실행

---

Tween 속성

• x : transform:translateX
• Y : transform:translateY
• rotation : transform:rotate(deg)
• skew : transform: skew(deg)
• scale : transform: scale
• XPercent : transform: translateX(%)
• YPercent : transform: translateY(%)
• delay : 애니메이션이 시작되기 전 지연시간
• repeat : 애니메이션의 반복 횟수(기본 1회 / repeat:1:2회 / repeat:-1:무한반복)
• repeatDelay : 각 애니메이션 반복 사이의 지연 시간
• yoyo : 애니메이션이 완료된 후 재생 방법
  • false : 기본값(시작-끝-시작-끝 재생)
  • true : 반대 재생(시작-끝-끝-시작 재생)
• ease : 애니메이션이 재생될 때의 속도 설정
  (ease: ease.type 으로 사용) DAMO
  Default값은 "power1.out" 이다.
• stagger : 단일 애니메이션에서 여러 대상의 시작 시간을 설정, 객체를 포함할 수 있다.
  • each : 각 애니메이션의 시작 사이값(기본값)
  • amount : 모든 애니메이션의 재생시간 값
  • from : 애니메이션을 시작하는 순서
    • center : 가운데에서 시작(3-2-1-2-3)
    • end : 뒤에서부터 시작(5-4-3-2-1)
    • edges : 양 사이드부터 시작(1-2-3-2-1)
• defaults : 애니메이션이 공통으로 가지는 속성

// 모든 .ex 박스는 1초 안으로 뒷 순서부터 x축으로 500 이동하는 애니메이션
gsap.to(".ex",{x:500, stagger:{amount:1,from:"end"}})

예시

const tl = gsap.timeline({
  repeat: 1, // 반복횟수 총 2번
  repeatDelay: 3, // 반복할때마다의 딜레이 3초
  yoyo: true, // 재시작할때는 끝부터 시작
  defaults: {duration: 2}, // timeline이 공통으로 가지는 속성
  paused: true})
  // 전체 박스들을!
  tl.to(".box", {x: 20});
  tl.to(".box", {backgroundColor:'white'})
  tl.to(".box", {y: 20},'-=1'); // 앞 타임라인 1초전 진행(앞의 애니메이션과 겹침)
  tl.to(".box", {backgroundColor:'tomato'},4) // 타임라인이 시작하고 4초 후 시작
  tl.to(".box", {opacity: 0, stagger: 0.3}); // 요소들이 0.3초씩 딜레이해서 변경
  tl.to(".box", {opacity: 1 ,stagger: 0.3});
  tl.to(".box", {x: -10});
  tl.to(".box", {rotation:360},"<"); // 앞의 요소 시작할 때 같이 진행
  tl.to(".box", {y: -10});
  tl.to(".box", {scale:.5},"+=4"); // 앞 타임라인 종료 후 4초 후 진행
  tl.to(".box", {y: 10});

---

🐟 FOUC(Flash of Un-styled Content)

: 스타일이 지정되어 있지 않은 요소들이 화면에 렌더링 될 경우 콘텐츠의 깜빡이는 플래시 효과를 나타내는 용어

+)🐣
웹폰트가 로드되기 전 페이지 렌더링 상태에서 기본 글꼴이 나오고 웹폰트로 변경되는 모습을 상상해봐=^ㅅ^=)
즉 gsap사용시 애니메이션이 로딩되기 전 깜박하는 FOUC 현상이 나타난다!
이 현상을 제거하기 위해 3가지 해결책을 준비했어~

• 1. 애니메이션이 로드가 되고 나타날 수 있게 DOMContentLoaded 이벤트를 설정한다.
• 2. 전체 부모 요소에게 CSS visibility:hidden 속성 부여하기
     ( → 로드를 하지 않기 때문에 애니메이션에서visibility:visible 속성 추가해 줘야 한다.)
• 3. GSAP의 속성인 autoAlpha:0 설정하기

autoAlpha

: GSAP의 속성이다.(CSS NO!)
autoAplha:0을 설정하면 opacity:0,visibility:hidden
autoAplha:1을 설정하면 opacity:1,visibility:inherit

//autoAlpha로 visibility:hidden 설정!
gsap.to(element, {duration: 2, autoAlpha: 0});

// 2초 후에 보인다!
gsap.to(element, {duration: 2, autoAlpha: 1, delay: 2});

---

🐡 Plugin

🐟 ScrollTo

ScrollTo

: window 또는 DOM 요소에 스크롤 위치 애니메이션
!주의! CSS에서 함께 사용하면 scroll-behavior: smooth충돌이 발생.
ScrollTo

예시

// 상단으로 스크롤 버튼을 클릭하면,
toTopEl.addEventListener('click', function () {
  // 페이지 위치를 최상단으로 0.7초 동안 이동.
  gsap.to(window, .7, {
    scrollTo: 0
  })
})

---

🐟 ScrollTrigger

ScrollTrigger

: 특정 요소 또는 특정 위치 스크롤 기반 애니메이션
scrollTrigger로 이벤트 작동 속성 설정, trigger로 움직이고 싶은 요소 설정, start/end로 움직이고 싶은 지점 설정
ScrollTrigger

예시

let ex = gsap.timeline({ // scrollTrigger는 타임라인에 추가할 수 있다!
    scrollTrigger: {
      trigger: ".container", // trigger 대상
      pin: true, // trigger 고정
      start: "top top", // trigger가 viewport 상단에 닿을때 시작
      end: "+=500", // 시작지점에서 500px를 스크롤한 후 끝
      scrub: 1, // 애니메이션 부드럽게 진행
      snap: {
        snapTo: "labels", // 타임라인에서 가장 가까운 라벨에 스냅
        duration: {min: 0.2, max: 3}, // 최소 0.2 최대 3초 동안
        delay: 0.2, // 스냅을 하기 전 0.2초동안 지연
        ease: "power1.inOut" // 변화속도
      }
    }
  });

tirgger

: ScrollTrigger을 사용할 때 움직이고 싶은 요소를 지정한다.

markers

: 요소와 스크롤의 시작, 끝 지점을 확인할 수 있다.
markers:ture : 기본값 (startColor: "green", endColor: "red")

• id값을 입력하면 markers에 적용되서 표시된다.

    markers: true,
	id: 'gsap공부중'

start / end

: 요소가 움직일 시작과 끝을 설정한다.
속성:"요소(trigger)의 위치 | 뷰포트(viewport)의 스크롤 위치" 두가지 값을 받는다.

• top, bottom, left, right, px, % 사용 가능하다.
• % 와 px은 항상 상단 왼쪽을 기준으로 한다.
• function으로 작성이 가능하다.

start : 애니메이션을 시작하기 위한 요소(trigger)와 뷰포트(viewport)의 스크롤 시작 위치
end : 애니메이션을 종료하기 위한 요소(trigger)와 뷰포트(viewport)의 스크롤 끝 위치

예시

start: "100px" // 요소의 상단이 뷰포트 스크롤 100px을 지나 시작
start: "top 20%" // 요소의 상단이 스크롤이 80%에 닿으면 시작
start: "top bottom-=100px" // 요소의 상단이 스크롤러 하단에서 100px위에 도달할 때
start: ()=>window.innerHeight // 뷰포트의 높이에 닿을 때 시작
end: "bottom center" // 요소의 하단이 스크롤의 중앙에 보이면 종료
end: "+=300" // 요소의 상단이 스크롤의 300px 더 간 후 종료

toggleActions

: 요소의 위치에 따른 애니메이션 제어 방식 설정한다.
toggleActions: "onEnter-onLeave-onEnterBack-onLeaveBack" 의 순서로 설정하며 기본값은 play none none none 이다.

onEnter : 애니메이션이 시작했을 때
(trigger와 scroll이 만났을 때 = 요소가 시야에 들어올 때)
onLeave : 애니메이션이 끝났을 때
(trigger가 scroll을 지나쳤을 때 = 요소가 시야에서 벗어날 때)
onEnterBack : 애니메이션이 시작하고 화면에 다시 보일 때
(trigger가 scroll을 지나쳤다가 다시 만났을 때)
onLeaveBack : 애니메이션이 끝나고 화면에 다시 보이지 않을 때
(trigger가 scroll을 지나쳤다가 다시 지나쳤을 때 즉, 스크롤을 내리고 올려서 다시 지나쳤을 때)

속성

• play: 재생
• pause: 일시중지
• resume: 다시 재생
• reset: 초기화
• restart: 처음부터 재시작
• complete: 애니메이션 끝까지 완료
• reverse: 반대
• none: 없음
  DAMO

예시

toggleActions: "play pause resume reset"
// 요소가 시야에 들어올 때 시작하고 | 시야에서 나가면 멈추고
// 다시 시야에 들어오면 다시 시작하고 | 다시 지나가면 처음으로 초기화

toggleClass

: 애니메이션이 start일 때 class추가 end일 때 class제거할 수 있다.

toggleClass:'active'
// 요소가 start에 들어올때 active 클래스 추가, end로 넘어가면 active 클래스 제거

scrub(스크럽)

: scroll에 애니메이션 진행률을 연결한다.
속성값으로 scrub: true 또는 Number(정수)(=시간)를 사용할 수 있다.
🫡scrub에 시간을 큰 값으로 넣을 수록 진행이 부드러워진다.
👉숫자값을 넣으면 애니메이션 진행이 스크롤을 따라잡는 시간을 설정하는거라 숫자가 클수록 스무딩이 걸린다!

scrub: true // 애니메이션 진행률을 scroll에 연결
scrub: 1 // 애니메이션 진행률을 scroll에 연결하고
// + 애니메이션 진행률이 스크롤 막대 진행률을 따라잡는데 1초가 걸림

pin

: 스크롤이 되는 동안 요소를 고정시킨다.
pin:true : tirgger가 고정된다.
pin:'요소' : 특정 요소가 고정된다.

• 고정된 요소는 하나만 가능하지만 다른 요소를 포함하고 있을 수 있다.
• 고정된 요소 내부의 요소에게 애니메이션을 적용할 수 있다.
• 핀의 위치는 end의 두번째 속성값을 변경하면 바뀐다.

예시

🐟 Callback

onInit

: 애니메이션이 시작되기 바로 전에 함수를 호출한다.(onStart보다 빨리 호출)

예시

gsap.to(.box,3,{
  x: 20
  onInit:initFn
})

function initFn(){
	console.log('애니메이션 시작전!')
}

onStart

: 애니메이션이 시작될 때 함수를 호출한다.
(시간이 0에서 다른값으로 변경, 트윈이 여러번 시작되면 두번 이상 발생할 수 있다.)

onComplete

: 애니메이션이 완료되면 함수를 호출한다.

onUpdate

: 애니메이션이 업데이트 될 때마다 호출한다.

onRepeat

: 애니메이션이 새롭게 반복될 때마다 호출한다.

eventFunction + Params

: 이벤트 호출할떄 params값을 전달할 수 있다.
단, 배열 형태로 넘겨주어야 한다.

예시

gsap.to(".class",{
  x:100,
  onStart:myFunction,
  onstartParams:["시작","할때"]
  onComplete:myFunction,
  onCompleteParams:["끝날", "때"]
});

function myFunction(param1,param2){
	console.log(param1 , param2)
}