반응형
1. GSAP 라이브러리 불러오기
GSAP은 CDN 또는 NPM, Yarn을 통해 사용할 수 있음
1) CDN 방식 (HTML에 바로 연결)
- 별도 빌드 환경 없이 바로 사용 가능.
- 일반적으로 마감 본문 태그와 사용자 지정 GSAP 코드 앞에 GSAP 스크립트 태그를 붙이는 것이 가장 좋음
- GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋음
<html>
<head>
...
</head>
<body>
<!-- Put your script after the HTML -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<!-- And put your own code after - any GSAP code you write needs to have access to the library -->
<script src="myCustomCode.js"></script>
<script>
// custom code using GSAP
</script>
</body>
</html>2) NPM 방식 (프로젝트 설치)
- React, Vue, Next.js 같은 프레임워크 프로젝트에서 많이 사용.
npm install gsapimport gsap from "gsap";
반응형
'JS > JS Library' 카테고리의 다른 글
| [GSAP] GSAP 4 / GSAP ease (0) | 2025.08.19 |
|---|---|
| [GSAP] GSAP 3 / GSAP 기본 애니메이션 문법 (0) | 2025.08.19 |
| [GSAP] GSAP 1 / GSAP 기본 (gsap, tween, timeline, Sequencing (0) | 2025.08.19 |