GSAP의 ScrollTrigger 플러그인은 스크롤 이벤트에 반응하는 인터랙티브한 스크롤 애니메이션을 구현하는 강력한 도구입니다. 기본적인 사용법부터 Parallax 효과, 스크롤 기반 인터랙션까지 고급 기법을 활용하는 방법을 살펴보겠습니다.
1. GSAP ScrollTrigger란?
GSAP(GreenSock Animation Platform)는 강력한 자바스크립트 애니메이션 라이브러리로, ScrollTrigger 플러그인을 사용하면 스크롤 위치를 기반으로 다양한 애니메이션을 적용할 수 있습니다.
✅ ScrollTrigger의 주요 기능
- 특정 요소가 뷰포트에 진입하거나 벗어날 때 애니메이션 실행
- 스크롤 진행도에 따라 애니메이션을 동적으로 조정
- 다른 요소와 동기화된 인터랙션 구현 가능
- Parallax 효과, 고급 트리거 설정, Pinning 기능 지원
➡ CSS만으로 구현하기 어려운 복잡한 스크롤 애니메이션을 자바스크립트로 쉽게 적용할 수 있습니다.
2. GSAP ScrollTrigger 기초
📌 ScrollTrigger 기본 사용법
GSAP ScrollTrigger를 사용하려면 GSAP 라이브러리 및 ScrollTrigger 플러그인을 로드해야 합니다.
<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>
➡ CDN 방식으로 로드하면 바로 사용 가능하며, NPM을 이용해 설치할 수도 있습니다.
npm install gsap
그리고 ScrollTrigger를 활성화합니다.
gsap.registerPlugin(ScrollTrigger);
📌 기본적인 ScrollTrigger 애니메이션 적용
아래 코드는 .box 요소가 뷰포트에 들어오면 X축으로 이동하는 애니메이션을 실행합니다.
gsap.to(".box", {
x: 300,
duration: 2,
scrollTrigger: {
trigger: ".box",
start: "top 80%", // 요소의 top이 뷰포트의 80% 지점에 도달하면 시작
end: "top 30%", // 요소의 top이 뷰포트의 30% 지점에 도달하면 끝남
scrub: true, // 부드러운 스크롤 애니메이션 효과
}
});
✅ 스크롤 트리거 주요 옵션
| 옵션 | 설명 |
|---|---|
trigger | 애니메이션을 실행할 요소 지정 |
start | 애니메이션 시작 위치 설정 ("top 80%": 요소의 top이 뷰포트 80% 위치에 올 때 시작) |
end | 애니메이션 종료 위치 설정 |
scrub | true로 설정하면 스크롤에 따라 애니메이션이 부드럽게 동기화됨 |
3. Parallax 효과 구현
Parallax(패럴랙스) 효과는 스크롤에 따라 배경 또는 요소가 다르게 움직이도록 하여 깊이감을 주는 기법입니다.
📌 Parallax 배경 효과
배경 이미지가 스크롤 속도에 따라 다르게 움직이는 효과를 구현할 수 있습니다.
.section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url("background.jpg");
background-size: cover;
background-attachment: fixed;
}
gsap.to(".section", {
backgroundPosition: "50% 100%", // 배경이 천천히 이동
scrollTrigger: {
trigger: ".section",
start: "top bottom",
end: "bottom top",
scrub: 1
}
});
✅ 효과 설명
backgroundPosition: "50% 100%": 배경 이미지의 Y축 위치가 변화함scrub: 1: 스크롤 속도와 부드럽게 동기화
➡ 배경이 마치 멀리 있는 것처럼 천천히 이동하는 느낌을 연출할 수 있습니다.
📌 Parallax 요소 개별 이동 효과
gsap.to(".foreground", {
y: -100,
scrollTrigger: {
trigger: ".foreground",
start: "top 80%",
end: "bottom 20%",
scrub: 1
}
});
✅ 효과 설명
.foreground요소가y: -100px만큼 위로 이동- 배경보다 빠르게 움직여 입체적인 패럴랙스 효과 구현
4. 스크롤 기반 인터랙션
📌 요소가 등장하는 스크롤 애니메이션
아래 코드는 .text-box 요소가 스크롤될 때 투명도와 위치 변화 효과를 주는 예제입니다.
gsap.from(".text-box", {
opacity: 0,
y: 50,
duration: 1.5,
scrollTrigger: {
trigger: ".text-box",
start: "top 90%",
end: "top 50%",
toggleActions: "play none none reverse"
}
});
✅ toggleActions 옵션 설명
| 값 | 동작 |
|---|---|
play | 스크롤이 트리거에 도달하면 애니메이션 실행 |
none | 스크롤이 다시 올라가도 아무 동작 없음 |
none | 트리거가 벗어나도 변화 없음 |
reverse | 반대로 스크롤하면 애니메이션이 되감기 |
➡ 요소가 부드럽게 나타나고, 다시 스크롤을 올리면 사라지는 효과를 줄 수 있습니다.
결론: ScrollTrigger를 활용한 고급 스크롤 애니메이션 정리
✅ GSAP ScrollTrigger를 활용하면 스크롤 기반 애니메이션을 쉽게 구현할 수 있습니다.
✅ Parallax 효과를 추가하면 보다 입체적인 인터랙션이 가능합니다.
✅ 스크롤 위치에 따라 요소가 등장하고 변화하는 동적인 애니메이션을 적용할 수 있습니다.
ScrollTrigger를 활용하여 웹사이트에 생동감을 더해보세요! 🚀
