728x90
300x250
SMALL
개념 설명
ScrollTrigger를 사용하려면 먼저 GSAP과 ScrollTrigger 플러그인을 로드해야 한다.
설치 방법
1) CDN 방식
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
2) npm 설치
Node.js 환경에서 사용하려면 npm으로 설치할 수 있다.
npm install gsap
이후 JavsScript 파일에서 플러그인을 등록해야 한다.
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
기본예제 만들어보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP ScrollTrigger Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 200vh; /* 충분한 스크롤을 위해 높이 늘리기 */
}
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 3rem;
text-align: center;
}
.section-1 {
background-color: #3498db;
}
.animate-box {
width: 200px;
height: 200px;
background-color: #f39c12;
}
</style>
</head>
<body>
<div class="section section-1">
<div class="animate-box">Scroll to Animate</div>
</div>
<!-- GSAP 및 ScrollTrigger CDN 포함 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script>
// GSAP ScrollTrigger 애니메이션
gsap.to(".animate-box", {
x:500,
duration: 2 //움직임속도 조절
});
</script>
</body>
</html>
- // 대상(.animate-box)선택하고 중괄호에 움직임을 준다.
- x축으로 500px 움직임
실행결과
Scroll to Animate
728x90
반응형
LIST
'Front-end > gsap' 카테고리의 다른 글
| ScrollTrigger로 요소를 부드럽게 움직이는 방법 (0) | 2025.03.31 |
|---|---|
| gsap pin효과 - 비 (0) | 2025.03.29 |
| GSAP ScrollTrigger Snap 기능 가이드 (0) | 2025.03.27 |
| gsap parallax 스크롤 효과 - 비 (0) | 2025.03.24 |
| GSAP와 ScrollTrigger로 부드러운 스크롤 애니메이션 만들기 (0) | 2025.03.17 |
댓글