GSAP와 ScrollTrigger로 구현하는 스크롤 애니메이션의 모든 것!
CSS 25.01.02오늘은 스크롤 한 번으로 웹페이지를 환상적인 애니메이션 공간으로 바꿀 수 있는 마법을 소개합니다.
바로 GSAP와 ScrollTrigger를 이용한 스크롤 애니메이션입니다. CodePen의 이 예제를 통해 그 매력을 살펴볼까요?
1. 이게 왜 대단한 거야?
웹사이트를 스크롤하다 보면 이미지나 텍스트가 살아 움직이듯 나타나는 걸 본 적 있나요?
이런 효과는 사용자를 몰입하게 하고 콘텐츠를 강조할 때 정말 유용합니다.
이 예제는 스크롤에 따라 박스가 투명하게 시작해 자연스럽게 나타나며 위로 떠오르는 간단하면서도 세련된 애니메이션을 보여줍니다.
2. 주인공은 누구?
GSAP: 웹 애니메이션의 마법사. 어떤 요소든 움직이게 만드는 데 탁월하죠.
ScrollTrigger: GSAP의 스크롤 전용 플러그인으로, 사용자의 스크롤 동작과 애니메이션을 연결해줍니다.
3. 애니메이션의 비밀
이 예제의 핵심은 스크롤 위치에 따라 박스가 점점 선명해지고 위로 이동하는 효과입니다. 어떻게 가능할까요?
코드 한 조각으로 살펴보기
1 2 3 4 5 6 7 8 9 10 11 12 13 | gsap.from(".box", { scrollTrigger: { trigger: ".box", // 애니메이션을 실행시킬 요소 start: "top 80%", // 박스의 상단이 뷰포트 80% 지점에 도달하면 시작 end: "top 30%", // 박스의 상단이 뷰포트 30% 지점에 도달하면 종료 scrub: true, // 스크롤과 애니메이션이 동기화 markers: true // 디버깅용 마커 표시 }, opacity: 0, // 0% 투명도에서 시작 y: 100, // 아래에서 100px 떨어진 위치에서 시작 duration: 2 // 애니메이션이 2초 동안 진행 }); | cs |
포인트를 짚어보면
trigger: 특정 요소(.box)가 애니메이션의 시작점 역할.
start와 end: 애니메이션 시작/종료 위치를 정의. 예를 들어 start: "top 80%"는 박스의 상단이 뷰포트의 80% 지점에 도달하면 시작하라는 의미.
scrub: true: 스크롤 진행에 따라 애니메이션이 연동돼 자연스럽게 움직임.
markers: true: 개발 시 유용한 디버깅 도구. 트리거 지점과 애니메이션 범위를 화면에 표시.
4. 사용자의 눈을 사로잡는 효과!
[예제]
See the Pen Untitled by designkits (@designkits) on CodePen.
✨ 결론: 웹에 마법을 더하다
스크롤은 단순히 화면을 내리는 행위가 아닙니다. GSAP와 ScrollTrigger로 스크롤을 하나의 이야기로 바꿀 수 있습니다.
다음 프로젝트에서 여러분의 웹페이지에 이런 놀라운 스크롤 애니메이션을 적용해보세요. 사용자들은 단순히 페이지를 보는 게 아니라, 경험하는 것처럼 느낄 겁니다!
한 번 직접 시도해보고, 스크롤의 마법을 느껴보세요! ☀️