GSAP 애니메이션 라이브러리 1

다시 초심을 잡아서 꾸준히 공부하는 기록을 남기고자 다시 돌아왔다.

퍼블리셔로 일하면서 GSAP 애니메이션을 자유롭게 이용해 화면을 구현한다면 더할 나위 없는 장점이 될 것이라고 느꼈다.

그리고 생각보다 애니매이션을 추가로 홈페이지가 더 다채로운 화면으로 또 UI/UX 적으로 크게 긍정적인 영향을 미치는 것을 볼 수 있었다. 

공식 홈페이지 바로가기

 

먼저 GSAP는 애니메이션 라이브러리이다. 그래서 스크롤 이벤트, 도형의 움직임 등 구현할 수 있는 애니메이션이 매우 다양하다.

GSAP 사이트로 들어가면 script 불러오는 방식이랑 문서가 있지만 전부 영어고 제대로 해석된 자료들이 없어 시간이 오래 걸렸지만, 이젠 내 친구 챗지피한테 물어보면서 독학할 수 있었다.

사랑한다 지피티야❤️

근데 물론 지피티에 100% 의존하면 안되고 문서 보면서 파악하고 이해 안 되는 부분이 생기면 그때 지피티랑 토론하듯이 대화해야 양질의 정보를 얻을 수 있다.

앞서 작성한 것처럼 다양한 애니메이션을 구현할 수 있는데 

스크롤 + 움직임 애니메이션을 함께 사용했을 때 아주아주 매력적이다. 특히 스크롤 애니메이션 직접 구현하다 보면 어느 부분에서 버벅임이 있거나 반응형 대응에 취약하거나 혹은 비효율적인 코드 작성으로 페이지자체가 매우 느려지곤 한다. 이는 전부 사용자에게 부정적인 경험을 겪게 하고 결과적으론 홈페이지 이탈자가 많아지는 결과를 초래한다.

그렇다면 본론으로 들어가 세팅부터 스크롤 애니메이션, 도형 움직임, 바운스와 타이머, 좀 더 효율적으로 작성해야할 관점에 대해 작성해보려고 한다.

Quick start > Installation 클릭하면 npm, CDN, yarn으로 다양하게 설치 가능하다.

그 중에서 CDN으로 설치하려고 한다.

아래 스크립트 태그를 코드 내에 삽입

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

 

그리고 Plugins 카테고리 내 다양한 체크박스들이 있다. 

해당 체크박스들은 애니메이션 종류들이니 해당 애니메이션 사용 예정이면 체크해서 생성된 스크립트 태그를 추가해줘야한다.

 

예시)

GSAP 애니메이션 기능 중에 Draggable을 사용할 예정이라면

해당 애니메이션 체크 후 생성된 스크립트 태그를 삽입하면 된다.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Draggable.min.js"></script>

위 처럼 하나씩 추가하면 된다. 

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Draggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

SplitText까지 체크하면 위처럼 3개로 늘어나게 된다. 

Draggable 애니메이션 구현하는데 정의되지 않은 기능이라면서 콘솔창에 나온 적이 있었는데

알고 보니 그냥 해당 애니메이션 태그 삽입 안해서 생긴 문제다. 허허허

자바스크립트 작성할 때 기본 프레임은 체크하면 아래 콘텐츠에 나온다.

<script>
 // use a script tag or an external JS file
 document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(Draggable)
  // gsap code here!
 });

</script>

gsap.registerPlugin(Draggable) 이라고 작성해줘야한다.

->설치할 때 양식은 gsap.registerPlugin(플러그인작성)

만약에 여러 개의 플러그인을 사용한다면 아래처럼 작성하면 된다.

gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);

위 내용은 FAQs에서 해당 내용 찾을 수 있다. 

Do I need to gsap.registerPlugin() each plugin?

Typically, yes. ~~~

gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);

 

왜 gsap.registerPlugin(플러그인) 이 코드를 삽입해야할까?

보통 CDN 방식은 플러그인이 로드될 때 자동 등록되서 동작하지만, 순서가 잘못되면 자동 등록이 실패하고 

"플러그인 is not defined" 라는 에러 코드가 나올 수 있다.

그래서 안전한 실행을 위해서 꼭꼭 gsap.registerPlugin(플러그인) 삽입 방식을 권장한다.

ES 모듈 방식은 그냥 무조건 해야한다. 안 하면 플러그인 작동 안되고 번들에서 빠지게 되어서 안된다. (*트리 셰이킹 이슈 방지)

=> 그냥 필수라고 생각하자👍

*트리 셰이킹 이슈

번들러가 사용되지 않는 코드를 제거해 최종 번들 크기를 줄이는 최적화인데 플러그인을 코드에서 직접 참조하지 않으면 번들러가 사용하지 않는다고 생각하고 플러그인 코드를 통째로 빼버리는 이슈

 

지금까지 Draggable 플러그인 세팅까지 완료했다. 이제 사용해보자.

친절한 Docs를 살펴보자. 보자보자

Draggable 공식문서 이미지

플러그인 등록 -> 기능 구현으로 스크립트 작성하면 된다.

#yourID는 애니메이션 먹일 아이디, type은 종류라고 생각하면 될 것 같다.

type에는 x, y, left, top, rotation이 있다.

x,left은 좌우 / y, top은 상하 / rotation은 회전이다.

자세한 속성은 아래 콘텐츠로 정리되어 있다.

https://gsap.com/docs/v3/Plugins/Draggable/#type

 

스크롤 내리다 보니 코드가 더 길어져있다.

Draggable.create("#yourID", {
  type: "y",
  bounds: document.getElementById("container"),
  inertia: true,
  onClick: function () {
    console.log("clicked");
  },
  onDragEnd: function () {
    console.log("drag ended");
  },
});

bounds와 inertia와 onClick했을 때와, onDragEnd 했을 때 동작까지 옵션 지정까지 디테일하게 설정 가능한 것을 확인할 수 있다.

bounds : 드래그 가능한 영역 지정
inertia : 놓았을 때의 관성효과 (밀리는 효과)
onclick : 클릭 이벤트
onDragEnd : 드래그 끝났을 때 이벤트

그렇다면 이제 직접 코드로 입력해서 어떻게 움직이는지 보려고 한다.

근데 더 작성하고 싶은데 너무 길어졌다. 일단 올리고 수정하면서 내용 보충하려고 한다. 

See the Pen Untitled by Siyoon Kim (@siyoonagain) on CodePen.