GSAP

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 27,764)

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

GSAP 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// 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

GSAP 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

GSAP

GSAP 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README