작성완료

requestAnimationFrame 부드러운 애니메이션 효과 구현

requestAnimationFrame을 활용하여 부드러운 스크롤 애니메이션을 구현하는 방법을 설명한다. 이 기술은 성능 최적화에 유리하며, CSS의 스무스 스크롤보다 더 세밀한 제어가 가능하다. 다양한 활용 아이디어로는 내비게이션 스크롤, 백투탑 버튼 애니메이션 등이 있다.

JavaScriptWeb Front Developer

개요

requestAnimationFrame을 활용하면 브라우저의 렌더링 타이밍에 맞춰 자연스럽고 성능 좋은 스무스 스크롤 애니메이션을 구현할 수 있다.

기본 개념

requestAnimationFrame은 브라우저가 다음 화면을 렌더링하기 직전에 콜백을 실행한다. 이를 이용해 스크롤 위치를 점진적으로 변경하면 화면 끊김 없이 부드럽게 움직인다.

스무스 스크롤 구현 코드

javascript
function smoothScrollTo(targetY, duration = 500) {
  const startY = window.scrollY;
  const diff = targetY - startY;
  const startTime = performance.now();

  function animate(time) {
    const progress = Math.min((time - startTime) / duration, 1);
    const eased = progress < 0.5
      ? 2 * progress * progress
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;// ease-in-outwindow.scrollTo(0, startY + diff * eased);

    if (progress < 1) requestAnimationFrame(animate);
  }

  requestAnimationFrame(animate);
}

// 사용 예시document.getElementById("to-top").addEventListener("click", () => {
  smoothScrollTo(0, 600);
});

장점

CSS scroll-behavior: smooth보다 훨씬 더 세밀한 제어 가능
easing, duration, 조건 처리 등을 마음대로 커스터마이징 가능
requestAnimationFrame 기반이라 성능 최적화에 유리

활용 아이디어

특정 섹션으로 이동하는 내비게이션 스크롤
백투탑 버튼 애니메이션
스크롤 위치 기반 인터랙션 구성

마무리

requestAnimationFrame을 이용하면 스크롤 애니메이션의 흐름을 완벽하게 제어할 수 있다. 단순한 UX 개선부터 고급 인터랙션까지 폭넓게 활용 가능한 테크닉이다.

requestAnimationFrame 부드러운 애니메이션 효과 구현

JavaScriptWeb Front Developer