GSAP

일부 기능(Scroll smoother, SplitText ... ㅜㅜ)이 유료로 전환되었다.
전환이 아니라 원래 그랬는지..? 아니 이전에 됬던거같은데 아닌가

어쨌든 포트폴리오 사이트에 사용한 자주쓰이는 기능들 위주로 공부 겸 메모!

gsap 사이트의 codepen과 정보의 바다 속 다양한 분들의 코드로 원하는 애니메이션을 쉽게 구현할 수 있었다.
정말 최고의 라이브러리가 아닐수없다 엉엉

---

start

https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true

Docs에서 필요로 하는 기능을 체크해 스크립트를 생성할 수 있다.(오오)

gsap.min이 기본이므로 import 우선순위가 높고 그 후로 사용할 플러그인들을 작성해야 한다.

이번 포트폴리오 사이트는 HTML, SCSS, JS만 사용해서 CDN으로 불러왔다.

    <!-- LIBRARY IMPORT S -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/Observer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/TextPlugin.min.js"></script>
    <!-- LIBRARY IMPORT E -->

---

to

https://gsap.com/docs/v3/GSAP/gsap.to()

// to('tag', {option})
gsap.to("#titleTypingAnimation", {duration: 3, text: titleTypingAnimation, delay: 0});

플러그인은 아니고 메소드
메소드가 굉장히 많은데 이중에 쓰는게 to, timeline, set 이렇게밖에 없다.
적재적소로 활용하려면 공부가 필요할 듯 하다.

이동 애니메이션에 관련된 옵션들을 지정할 수 있다.(dulation, rotate 등)
from과 fromTo를 사용해 시작점과 종료점을 지정할 수 있다고 한다.

---

scrollTo

특정 요소로 이동하는 애니메이션
to() 내부의 옵션으로 사용한다.
https://gsap.com/docs/v3/Plugins/ScrollToPlugin/

+) 같은 기능의 scrollIntoView

list.addEventListener("click", function () {
   document.getElementById(`content_section_${i+1}`).scrollIntoView({ behavior: "smooth" }) });

라이브러리 없이 사용 가능하고 성능 최적화가 장점!
스크롤 이동 애니메이션에 큰 요청 사항이 있는게 아니라면 scrollIntoView를 사용하는 편이다.

gsap의 scrollTo를 사용하면 이동 중간에 다른 애니메이션을 준다던지, 하는 식으로 꾸밀 수 있을 것이다. 일단 기억해두자!

---

timeline

이거도 to()처럼 메소드이다.
css의 @animation같은 기능이라고 이해했다.

scrollTo와 마찬가지로 scrollTrigger를 옵션으로 사용한다.
애니메이션을 특정 요소(trigger)에 연결해 해당 요소가 뷰포트에 있으면(트리거 감지) 재생한다.
scrub으로 애니메이션이 스크롤바를 따라잡는 시간을 설정한다.

---

dragable

snap, liveSnap이 주목적

snap은 드래그 후 적용(드래그 중 움직임 자유로움)
liveSnap은 드래그 중 실시간 적용, 자유로움 x

다음은 100단위로만 움직일 수 있는 snap 예제이다.
(중간에 막혀서 gpt가 해결해줌)

snap후 해당 위치로 이동하도록 to()를 추가했다.