스킬바 UI

스킬바는 포트폴리오 사이트에서 기술 숙련도를 시각적으로 보여주는 UI 요소이다. 스크롤 위치에 따라 막대나 원이 채워지는 애니메이션을 구현한다.

1. 막대형 스킬바

스크롤이 특정 위치에 도달하면 막대가 늘어나면서 퍼센트 숫자가 올라가는 애니메이션이다.

<div class="content">contents</div>
<div class="animation">
  <div class="progress-bar">
    <div class="bar"></div>
    <div class="rate" data-rate="30"></div>
  </div>
  <div class="progress-bar">
    <div class="bar"></div>
    <div class="rate" data-rate="90"></div>
  </div>
  <div class="progress-bar">
    <div class="bar"></div>
    <div class="rate" data-rate="60"></div>
  </div>
</div>
<div class="content">contents</div>

1.1. 원형 스킬바

SVG의 circle 요소와 stroke-dashoffset 속성을 활용한 원형 프로그레스 바이다.

<section>
  <h2>content</h2>
</section>
<div class="charts">
  <div class="chart">
    <h2 data-num="20">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="60">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="80">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="50">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
</div>
<section>
  <h2>content</h2>
</section>

1.2. SVG 라인형 스킬바

circle 대신 line 요소를 사용한 직선형 변형이다.

<section>
  <h2>content</h2>
</section>
<div class="charts">
  <div class="chart">
    <h2 data-num="20">0</h2>
    <svg>
      <line x1="0" y1="0" x2="500" y2="0"></line>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="20">0</h2>
    <svg>
      <line x1="0" y1="0" x2="500" y2="0"></line>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="80">0</h2>
    <svg>
      <line x1="0" y1="0" x2="500" y2="0"></line>
    </svg>
  </div>
</div>
<section>
  <h2>content</h2>
</section>

2. GSAP으로 원형 스킬바 만들기

GSAP과 ScrollTrigger를 사용하면 jQuery 없이도 스킬바 애니메이션을 구현할 수 있다.

2.1. CDN 로드

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

2.2. HTML 구조

<div class="circular-pbar">
  <span class="circular-pbar-counter">0</span>
</div>

2.3. 기본 CSS

.circular-pbar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(darkred 33%, 0, black);
  position: relative;
}
.circular-pbar-counter {
  position: absolute;
  font-size: 3em;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.4. CSS 변수로 애니메이션 준비

.circular-pbar {
  --p: 0;
  background: conic-gradient(#df3030 var(--p, 0), 0, #cacaca);
}

2.5. GSAP으로 게이지 애니메이션

gsap.to('.circular-pbar', {
  '--p': '33%',
  duration: 4,
  ease: 'expo.out',
});

2.6. 숫자 카운트 + ScrollTrigger 적용

스크롤 위치에 따라 숫자도 함께 올라가도록 확장한다.

const circles = document.querySelectorAll('.circular-pbar');

circles.forEach((el) => {
  const counter = el.querySelector('.circular-pbar-counter');
  const tg = counter.textContent + '%';

  const tm = gsap.timeline({
    defaults: { duration: 4, ease: 'expo.out' },
    scrollTrigger: {
      trigger: el,
      toggleActions: 'play pause resume reset',
    },
  });

  tm.from(counter, {
    textContent: 0,
    modifiers: {
      textContent: (textContent) => {
        return textContent.toFixed();
      },
    },
  });

  tm.to(el, { '--p': tg }, 0);
});