GitHub - greensock/GSAP: GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
핵심 포인트
- 1GSAP는 CSS, SVG, React 등 다양한 요소를 고성능으로 애니메이션화하며, 브라우저 호환성을 보장하고 jQuery보다 최대 20배 빠른 JavaScript 애니메이션 라이브러리입니다.
- 2ScrollTrigger, Flip, Draggable과 같은 강력한 플러그인과 유틸리티 메서드를 제공하여 복잡한 시퀀싱 및 스크롤 기반 애니메이션을 쉽게 구현할 수 있습니다.
- 3Webflow 덕분에 모든 보너스 플러그를 포함한 GSAP 전체 툴셋이 이제 상업적 용도에도 100% 무료로 제공됩니다.
이 문서는 GreenSock Animation Platform (GSAP)에 대한 GitHub README 파일입니다. GSAP는 개발자가 높은 성능의 애니메이션을 쉽게 구현할 수 있도록 돕는 프레임워크-불가지론(framework-agnostic) JavaScript 애니메이션 라이브러리입니다.
핵심 기능 및 기술적 특징:
GSAP는 CSS, SVG, canvas, React, Vue, WebGL 객체, 색상, 문자열, 모션 경로 및 일반 JavaScript 객체 등 JavaScript가 접근할 수 있는 모든 것을 애니메이션화할 수 있습니다. 핵심적으로, GSAP는 "고속 속성 조작기(high-speed property manipulator)"로서, 정밀하게 시간의 흐름에 따라 값들을 업데이트하여 애니메이션을 구현합니다. 이는 jQuery에 비해 최대 20배 빠른 성능을 제공하며, 1,200만 개 이상의 웹사이트에서 사용될 정도로 신뢰성과 제어력을 자랑합니다. 수많은 브라우저 비호환성을 내부적으로 처리하여, 개발자가 브라우저 호환성 문제 없이 애니메이션을 작동시킬 수 있도록 합니다.
주요 플러그인과 기능들은 다음과 같습니다:
ScrollTrigger: 스크롤 기반 애니메이션의 표준으로, 최소한의 코드로 인상적인 스크롤 효과를 가능하게 합니다.ScrollSmoother라는 동반 플러그인도 함께 제공됩니다.gsap.matchMedia(): 반응형 및 접근성 친화적인 애니메이션을 쉽게 구축하도록 돕습니다.Observer: 브라우저/기기 전반에 걸쳐 이벤트 감지를 정규화합니다.- 기타 고급 효과를 위한 플러그인 및 이징(easing) 함수: morphing, text splitting, motion path 애니메이션, FLIP animations 등이 있습니다.
- 유틸리티 메서드:
interpolate(),mapRange()등을 포함합니다. - 스내핑(snapping) 및 모디파이어(modifiers) 기능도 제공합니다.
설치 및 사용 방법:
GSAP는 CDN을 통해 직접 스크립트를 포함하거나 npm을 사용하여 npm install gsap 명령어로 설치할 수 있습니다. npm을 통해 설치된 파일은 ES modules 형식이지만, 추가적인 호환성을 위해 /dist/ 디렉토리에는 UMD files도 제공됩니다.
GSAP의 핵심 모듈은 거의 모든 것을 애니메이션화할 수 있으며, 다른 플러그인들은 다음과 같이 개별적으로 import 할 수 있습니다:
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";
// 또는 모든 도구를 한 번에 import (멤버 전용 플러그인 제외):
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";
// 플러그인 사용 전에 반드시 등록해야 합니다:
gsap.registerPlugin(ScrollTrigger, Draggable, Flip, MotionPathPlugin);라이선스 및 자원:
Webflow 덕분에 GSAP는 SplitText, MorphSVG 등 이전에 Club GSAP 회원 전용이었던 모든 보너스 플러그인을 포함하여 100% 무료로 제공됩니다. 상업적 사용을 포함하여 전체 GSAP 도구 세트가 무료입니다.
React 사용자를 위해 @gsap/react 패키지가 제공되어, useEffect() / useLayoutEffect()의 드롭인 대체품인 useGSAP() hook을 노출하고 클린업(cleanup) 작업을 자동화합니다.
문서는 gsap.com에서 시작 가이드, 데모, 커뮤니티 포럼, Ease Visualizer, 쇼케이스, YouTube 채널 및 치트 시트 등 다양한 자원을 제공합니다. 버그 보고나 지원은 GSAP 포럼을 통해 가능합니다.