[Web] 자바스크립트 애니메이션 라이브러리 GSAP 세팅 방법

GSAP란?

Professional-grade JavaScript animation for the modern web

 

위는 Greensock 팀 공식 사이트 대문에 있는 GSAP 소개문입니다.

GSAP는 빠르고, 견고하고, 호환성 높은 코드 품질을 추구합니다.

브라우저나 기기 환경에 따른 오작동이 적어서 다른 라이브러리에 비해 신뢰성이 높습니디.

저는 아무래도 의심이 가서 모바일 환경에서 GSAP를 여러 번 테스트했지만 별다른 문제점을 발견하지 못했습니다.

GSAP 코어와 플러그인을 조합하여 웹 상에 애니메이션을 표시할 수 있습니다.

설정을 마치고 여기서 Get Started 한글 요약본을 보고 빠르게 시작해보세요.

 

GSAP 플러그인 기능 둘러보기

어떤 플러그인을 사용할지 결정하려면 어떤 효과가 있는지 직접 둘러봐야 합니다.

웹페이지에 애니메이션을 적용하려 하신다면 GSAP가 제공하는 다양한 플러그인들 중

여러분의 프로젝트에 맞는 플러그인이 분명 하나쯤은 있을 것입니다.

 

https://greensock.com/gsap-plugins/

Plugins

 

마음에 드는 플러그인을 점찍어 두셨다면 API를 본격적으로 이용하기 위해 설치하기로 넘어갑시다.

 

GSAP 설치하기

설치 링크

Docs

원하는 플러그인을 고르세요

 

원하는 Extra Plugins, Extra Eases를 체크하면 가장 최신 버전으로 CDN 소스 목록이 생성됩니다.

목록을 복사해서 그대로 헤더 태그에 붙여넣으면 코어와 플러그인이 모두 준비되니 편리합니다.

맨 윗줄에는 gsap 코어가 항상 들어있으니 자연스럽게 모든 구성요소를 갖추게 됩니다.

이런 식으로 생성됩니다

 

기본 튜토리얼

아래의 공식 튜토리얼을 요약한 포스팅을 작성했으니 시간이 없으신 분들은 확인해보세요.

1번 튜토리얼

Getting Started with GSAP

2번 튜토리얼

Getting Started with GSAP - continued

 

 

GSAP 치트 시트

 여기서 Get Started 한글 요약본을 보고 빠르게 시작해보세요.

GSAP는 다양한 메소드를 제공하므로 많은 기능을 이해하고 사용해야 합니다.

그 방대한 양을 공부하고 외워서 사용하기보다 치트시트를 활용해서 기능을 짐작하며 사용하는 편이 수월합니다.

Get Started 페이지에서 기본기를 이해했다면 치트시트가 더욱 빛을 발할 것입니다.

https://greensock.com/cheatsheet/

 

GSAP 3 Cheat Sheet