728x90
300x250
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>GSAP 스크롤 애니메이션</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.spacer {
height: 100vh;
background: #eee;
}
.box {
width: 200px;
margin: 100px auto;
padding: 50px;
background: #03a9f4;
color: white;
text-align: center;
border-radius: 10px;
font-size: 20px;
opacity: 0;
transform: translateY(50px);
}
</style>
</head>
<body>
<div class="spacer">스크롤 다운 ↓</div>
<div class="box">GSAP 애니메이션 실행!</div>
<div class="spacer"></div>
<!-- GSAP & ScrollTrigger 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>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
scrollTrigger: {
trigger: ".box",
start: "top 80%", // 요소가 화면 아래쪽 80%에 도달할 때 시작
toggleActions: "play none none none", // 한 번만 실행
},
y: 0,
opacity: 1,
duration: 1,
ease: "power3.out"
});
</script>
</body>
</html>
- .box요소는 초기 상태에서 opacity:0, translateY(50px)로 설정되어 있음
- 스크롤로 .box가 화면 아래 80% 지점에 도달하면 opacity:1, y:0으로 자연스럽게 애니메이션 한 번만 실행 (toggleActions: "play none none none")
GSAP을 사용하면 좋은점
- 다양한 이징 효과(ease: "power3.out", "bounce", "elastic" 등)
- 직관적이고 확장성 높은 애니메이션 구성
- ScrollTrigger와 결합하면 스크롤 트리거 + 애니메이션을 손쉽게 제어 가능
스크롤 다운 ↓
GSAP 애니메이션 실행!
728x90
반응형
LIST
'Front-end > gsap' 카테고리의 다른 글
| ScrollTrigger 이해하기: 핵심 개념 및 기능 분석 (0) | 2025.04.05 |
|---|---|
| ScrollTrigger로 요소를 부드럽게 움직이는 방법 (0) | 2025.03.31 |
| Gsap ScrollTrigger 처음 설치 및 기본 설정 방법 (0) | 2025.03.30 |
| gsap pin효과 - 비 (0) | 2025.03.29 |
| GSAP ScrollTrigger Snap 기능 가이드 (0) | 2025.03.27 |
댓글