GSAP

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

★ 27,764 Open GitHub ↗

GSAP (GreenSock Animation Platform), 모던 웹을 위한 자바스크립트 애니메이션 라이브러리

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# GSAP (GreenSock Animation Platform)
[![GSAP - Animate anything](https://gsap.com/GSAP-share-image.png)](https://gsap.com)
GSAP는 개발자를 애니메이션 슈퍼히어로로 만들어 주는 \*\*프레임워크에 구애받지 않는(framework-agnostic)\*\* JavaScript 애니메이션 라이브러리입니다. 모든 주요 브라우저에서 작동하는 고성능 애니메이션을 구축하세요. CSS, SVG, canvas, React, Vue, WebGL, 색상, 문자열, 모션 패스, 일반 객체 등 JavaScript가 닿을 수 있는 모든 것을 애니메이션화하세요! GSAP의 [ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/) 플러그인은 최소한의 코드로 입이 쩍 벌어지는 스크롤 기반 애니메이션을 제공합니다. [gsap.matchMedia()](https://gsap.com/docs/v3/GSAP/gsap.matchMedia())를 사용하면 반응형이고 접근성이 뛰어난 애니메이션을 아주 쉽게 구축할 수 있습니다.
1,200만 개 이상의 사이트에서 실제 문제를 해결하면서 이처럼 고급 시퀀싱, 안정성, 세밀한 제어 기능을 제공하는 라이브러리는 없습니다. GSAP은 수많은 브라우저 호환성 문제를 해결하므로 애니메이션이 \*\*\*그대로 작동합니다\*\*\*。핵심적으로 GSAP은 고속 속성 조작 도구이며, 극도로 정확하게 시간에 따라 값을 업데이트합니다. jQuery보다 최대 20배 더 빠릅니다!
GSAP은 완전히 유연하여 원하는 곳에 자유롭게 사용할 수 있습니다. \*\*종속성 제로.\*\*
[스크롤링](https://gsap.com/docs/v3/Plugins/ScrollTrigger/), [모핑](https://gsap.com/docs/v3/Plugins/MorphSVGPlugin), [텍스트 분할](https://gsap.com/docs/v3/Plugins/SplitText), [모션 패스](https://gsap.com/docs/v3/Plugins/MotionPathPlugin) 또는 [FLIP](https://gsap.com/docs/v3/Plugins/Flip/) 애니메이션과 같은 고급 효과를 손쉽게 구현할 수 있는 다양한 선택적 [플러그인](https://gsap.com/docs/v3/Plugins)과 [이징](https://gsap.com/docs/v3/Eases) 함수가 있습니다. 브라우저/디바이스 간 이벤트 감지를 정규화하는 유용한 [Observer](https://gsap.com/docs/v3/Plugins/Observer/)도 있습니다.
### 시작하기
[![Get Started with GSAP](https://gsap.com/\_img/github/get-started.jpg)](https://gsap.com/get-started)
## 문서 및 설치
[설치 가이드](https://gsap.com/install)를 포함한 [전체 문서 보기](https://gsap.com/docs).
### CDN
```html
```
코어 파일/플러그인에 대한 빠른 CDN 링크는 [JSDelivr의 전용 GSAP 페이지](https://www.jsdelivr.com/gsap)를 참조하세요. gsap.com에는 더 많은 [설치 지침](https://gsap.com/install)이 있습니다.
\*\*모든 주요 광고 네트워크는 파일 크기 계산에서 GSAP를 제외하며\*\* 대부분 자체 CDN에 보유하고 있으므로 적절한 URL은 해당 네트워크에 문의하세요.
### NPM
[NPM을 통해 GSAP를 사용하는 방법 가이드](https://gsap.com/install)를 참조하세요.
```javascript
npm install gsap
```
GSAP의 코어는 CSS와 속성을 포함하여 거의 모든 것을 애니메이션화할 수 있으며, [interpolate()](https://gsap.com/docs/v3/GSAP/UtilityMethods/interpolate()), [mapRange()](https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange())와 같은 모든 [유틸리티 메서드](https://gsap.com/docs/v3/GSAP/UtilityMethods), 대부분의 [이징](https://gsap.com/docs/v3/Eases)이 포함되어 있고 스냅 및 수정자(modifier) 기능을 수행할 수 있습니다.
```javascript
// 일반적인 임포트
import gsap from "gsap";
// 다른 플러그인 가져오기:
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";
// 또는 모든 도구가 "all" 파일에서 내보내집니다 (회원 전용 플러그인 제외):
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";
// 플러그인을 등록하는 것을 잊지 마세요
gsap.registerPlugin(ScrollTrigger, Draggable, Flip, MotionPathPlugin);
```
NPM 파일은 ES 모듈이지만, 추가 호환성을 위해 [UMD](https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/) 파일이 포함된 /dist/ 디렉터리도 있습니다.
## GSAP은 무료입니다!
[Webflow](https://webflow.com) 덕분에 이제 GSAP은 [SplitText](https://gsap.com/docs/v3/Plugins/SplitText), [MorphSVG](https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) 및 기존에 Club GSAP 회원에게만 독점적으로 제공되었던 모든 보너스 플러그인을 포함하여 \*\*100% 무료\*\*로 제공됩니다. 맞습니다. 상업적 용도로 사용하는 경우에도 전체 GSAP 툴셋이 무료입니다

se! 🤯 자세한 내용은 [여기](https://webflow.com/blog/gsap-becomes-free)에서 읽어보세요.
### ScrollTrigger & ScrollSmoother
스크롤 기반 애니메이션을 찾고 계신다면, GSAP의 [ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/) 플러그인이 표준입니다. 보조 도구인 [ScrollSmoother](https://gsap.com/docs/v3/Plugins/ScrollSmoother/)도 있습니다.
[![ScrollTrigger](https://gsap.com/\_img/github/scrolltrigger.jpg)](https://gsap.com/docs/v3/Plugins/ScrollTrigger)
### React를 사용하시나요?
`useEffect()`/`useLayoutEffect()`를 완벽하게 대체하여 정리(cleanup) 작업을 자동화하는 `useGSAP()` 훅을 제공하는 [@gsap/react](https://www.npmjs.com/package/@gsap/react) 패키지가 있습니다. 자세한 내용은 [React guide](https://gsap.com/react)를 읽어보세요.
### 리소스
\* [gsap.com](https://gsap.com/)
\* [Getting started guide](https://gsap.com/get-started/)
\* [Docs](https://gsap.com/docs/)
\* [Demos & starter templates](https://gsap.com/demos)
\* [Community forums](https://gsap.com/community/)
\* [Ease Visualizer](https://gsap.com/docs/v3/Eases)
\* [Showcase](https://gsap.com/showcase)
\* [YouTube Channel](https://www.youtube.com/@GreenSockLearning)
\* [Cheat sheet](https://gsap.com/cheatsheet)
\* [Webflow](https://webflow.com)
### 도움이 필요하신가요?
친절한 [GSAP forums](https://gsap.com/community/)에 질문해 보세요. 혹은 여러분의 지식을 공유하고 다른 사람을 도와주세요. 실력을 연마하는 좋은 방법입니다! 버그가 있다면 이곳에 제보해 주세요(원하신다면 [file an issue here](https://github.com/greensock/GSAP/issues)를 이용하셔도 됩니다).
### 라이선스
GreenSock의 표준 "무료(no charge)" 라이선스는 <https://gsap.com/standard-license>에서 확인하실 수 있습니다.
Copyright (c) 2008-2026, GreenSock. All rights reserved.

GSAP

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README