GSP-Scrubbed Vertical Rodolex

GSAP ScrollTrigger를 활용한 수직 회전 애니메이션 - Scrubbed Vertical Rodolex

스크롤에 반응하여 부드럽게 회전하는 SVG 애니메이션을 만들어보고 싶으셨나요?
이번 포스트에서는 GSAP의 ScrollTrigger 플러그인을 이용해 스크롤에 따라 수직으로 회전하는 인터랙션을 구현하는 방법을 소개합니다.

 

See the Pen Scrubbed Vertical Rodolex by GSAP (@GreenSock) on CodePen.

기술 요약

• GSAP - 고성능 애니메이션 라이브러리
• ScrollTrigger - 스크롤 기반의 애니메이션 제어 플러그인
• SVG - 벡터 그래픽 기반의 요소로 고해상도 인터랙션 구현 가능

핵심 코드 예시

HTML

<div class="box">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="#fff" stroke-width="10" fill="none" />
  </svg>
</div>

CSS

body {
  height: 200vh;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 300px;
  height: 300px;
}

JavaScript (GSAP + ScrollTrigger)

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box svg", {
  rotation: 360,
  transformOrigin: "50% 50%",
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom top",
    scrub: true,
  }
});

포인트 요약

• scrub: true를 사용해 스크롤 진행도에 따라 애니메이션을 실시간으로 연동
• transformOrigin을 중심으로 지정하여 자연스러운 회전 구현
• SVG를 이용해 해상도 저하 없이 부드러운 애니메이션 연출

활용 팁

• 로딩 애니메이션 또는 브랜드 심볼의 인터랙션 효과로 응용 가능
• 여러 개의 원형 요소를 중첩해 다층 회전 효과 구성 가능
• ScrollTrigger의 start 및 end 옵션으로 트리거 타이밍 세밀하게 조정