GSAP ScrollTrigger로 구현하는 원형 선 그리기 & 교차 모션 구현하기
CSS 25.07.10GSAP ScrollTrigger로 구현하는 원형 선 그리기 & 교차 모션 구현하기
GSAP의 ScrollTrigger와 SVG를 활용하면, 스크롤에 따라 자연스럽게 원형의 선이 드러나고,
마치 의도된 궤적처럼 원들이 중앙으로 모이는 애니메이션을 구현할 수 있습니다.
➰➰➰
✅ 오늘 구현할 애니메이션 기능 요약
-SVG
-GSAP ScrollTrigger를 활용해 스크롤에 따라 원이 중심으로 모이는 교차 애니메이션 구현
-이 모션은 브랜드 인트로, 서비스 소개 섹션 등에서 시선을 집중시키는 웹 인터랙션 효과로 자주 사용됩니다.
✅ SVG란?
SVG(Scalable Vector Graphics)는 HTML 문서에서 벡터 그래픽(선, 도형, 곡선 등)을 그릴 수 있는 태그입니다.
해상도에 영향을 받지 않아 확대해도 깨지지 않고, CSS 또는 JavaScript를 통해 동적으로 제어할 수 있다는 장점이 있습니다.
✅ 대표적인 SVG 도형 태그
✏️ HTML 구조는 이렇게 생겼어요
viewBox=”x y width height”
✔ SVG 내부 좌표계를 설정합니다. 시작점 (0, 0)부터 가로/세로 261px까지의 그리기 범위를 정의합니다.
✔ SVG 안에서 원을 그리는 태그입니다. 중심 좌표와 반지름을 지정해 정원을 만듭니다.
✔ cx : circle의 중심 x좌표로 viewBox 기준에서 가로 방향의 중심 위치를 설정합니다.
✔ cy : circle의 중심 y좌표로 viewBox 기준에서 세로 방향의 중심을 나타냅니다.
✔ r : 반지름(radius) 값으로, viewBox보다 약간 작게 설정해서 선이 잘리는 현상을 방지합니다.
✔ 테두리 구현을 위해서는 stroke와 관련된 속성을 적어주고, fill 속성은 none으로 하여 테두리만 노출될 수 있도록 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="circles-wrap"> <div class="circle-item expertise"> <div class="circle"> <circle class="circle-draw" cx="130" cy="130" r="129" stroke="rgba(222,81,38,0.5)" stroke-width="1" fill="none"/> </svg> <div class="circle--inner"> <lord-icon trigger="loop" delay="1000" colors="primary:#de5126" style="width:29px;height:27px"> </lord-icon> <div class="tit-box"> <span class="en-tit">Expertise</span> <span class="ko-tit">전문성</span> </div> </div> </div> </div> </div> | cs |
✏️ CSS로 효과 구현하기
✅ 왜 CSS에서도 사이즈를 지정해야 할까?
✔ viewBox는 내부 좌표계만 정의할 뿐, 화면에 실제로 표시되는 SVG 크기는 CSS의 width/height에 따라 달라집니다.
따라서 반응형 SVG나 정밀한 배치를 위해 CSS에서 명시적으로 크기를 지정해주는 것이 좋습니다.
transform-origin: center;
✔ 회전 기준점을 SVG의 중심으로 설정합니다.
✔ 이 기준점이 없으면 이상한 방향으로 돌아갈 수 있습니다.
stroke-dasharray
✔ SVG 선을 일정 간격으로 끊어서 보여주는 속성입니다.
✔ 810px로 지정하면, 선 전체를 한 번에 한 덩어리로 설정한 셈입니다.
stroke-dashoffset
✔ stroke-dasharray로 설정한 선을 얼마나 밀어서 숨길지 결정합니다.
✔ 810px은 전체 선이 숨겨진 상태이고, 이후 0으로 값을 변경하면, 선이 점점 그려지듯 나타나는 효과를 줄 수 있습니다.
✨ 참고: stroke-dasharray/dashoffset 시 계산법
✔ 원의 둘레 = 2πr = 2 * 3.14 * 129 ≈ 810px
선 그리기 시작 위치
✔ SVG
✔ -90deg로 회전시키면, 12시 방향부터 선이 그려집니다.
1 2 3 4 5 6 7 8 | #inc01 .cont .circles-wrap{display:flex;justify-content:center} #inc01 .cont .circle-item{display:flex;align-items:center} #inc01 .cont .circle-item .circle{position:relative} #inc01 .cont .circle-item .circle .circleSvg{width:100%;max-width:261px;aspect-ratio:1} #inc01 .cont .circle-item .circle .circleSvg .circle-draw{stroke-dashoffset:810px;stroke-dasharray:810px;transform:rotate(-90deg);transform-origin:center} #inc01 .cont .circle-item .circle .circle--inner{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;gap:21px;transform:translate(-50%, -50%);will-change:filter} #inc01 .cont .circle-item .circle .circle--inner .tit-box{display:flex;flex-direction:column;align-items:center} #inc01 .cont .circle-item .circle .circle--inner .tit-box .en-tit{font-size:20px;font-weight:500;color:var(--point);text-transform:uppercase} | cs |
✏️ GSAP로 애니메이션 구현하기
✔ .circle-draw 요소들의 strokeDashoffset 값을 0으로 설정하여 선을 따라 원 테두리가 자연스럽게 그려지는 애니메이션을 구현합니다.
✔ stagger: 0.02 → 각 원이 0.02초 간격으로 순차적으로 그려지며, 부드럽고 리듬감 있는 효과를 구현합니다.
✔ 첫 번째와 세 번째 원을 먼저 yPercent: 66으로 Y축 아래 방향으로 이동시킨 후,
각각 xPercent: 60, xPercent: -60으로 좌우로 모아 중심에 교차하는 형태를 만듭니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const circleDraw = gsap.timeline({ scrollTrigger:{ trigger:"#inc01", start:"24% 15%", end: "60% 15%", scrub:1, } }); circleDraw .to('#inc01 .cont .circle-draw',{strokeDashoffset:0, stagger:0.02}) .to('#inc01 .cont .circle-item.expertise, #inc01 .cont .circle-item.communication',{yPercent:66},"-=0.5") .to('#inc01 .cont .circle-item.expertise',{xPercent:60},"-=0.3") .to('#inc01 .cont .circle-item.communication',{xPercent:-60},"<"); | cs |
See the Pen GSAP ScrollTrigger로 구현하는 원형 선 그리기 & 교차 모션 구현하기 by designkits (@designkits) on CodePen.
