스크롤 기반 애니메이션 성능에 관한 우수사례

Yuriko Hirota

스크롤 기반 애니메이션의 새로운 기능

스크롤 기반 애니메이션은 사용자의 스크롤 위치에 의해 트리거되는 방식으로 웹사이트 또는 웹 애플리케이션에 상호작용과 시각적 흥미를 더하는 방법입니다. 이를 통해 사용자의 참여를 유도하고 웹사이트의 시각적 매력을 높일 수 있습니다.

이전에는 스크롤 기반 애니메이션을 만드는 유일한 방법이 기본 스레드에서 스크롤 이벤트에 응답하는 것이었습니다. 이로 인해 두 가지 주요 문제가 발생했습니다.

• 스크롤은 별도의 스레드에서 실행되므로 스크롤 이벤트를 비동기식으로 전달합니다.
• 기본 스레드 애니메이션은 버벅거림이 발생하기 쉽습니다.

따라서 스크롤과 동기화된 성능이 우수한 스크롤 기반 애니메이션을 만들기가 불가능하거나 매우 어렵습니다.

이제 CSS 또는 JavaScript에서 사용할 수 있는 스크롤 기반 애니메이션을 지원하는 새 API 세트가 도입됩니다. 이 API는 기본 스레드 리소스를 최대한 적게 사용하므로 스크롤 기반 애니메이션을 훨씬 쉽게 구현할 수 있으며 훨씬 더 부드럽습니다. 스크롤 기반 애니메이션 API는 현재 다음 브라우저에서 지원됩니다.

이 도움말에서는 새로운 접근 방식과 기존 JavaScript 기법을 비교하여 새로운 API를 사용하면 스크롤 기반 애니메이션이 얼마나 쉽고 부드러워질 수 있는지 보여줍니다.

스크롤 기반 애니메이션 CSS API와 기존 JavaScript 비교

다음 예시 진행률 표시줄은 클래스 JavaScript 기법을 사용하여 빌드됩니다.

문서는 scroll 이벤트가 발생할 때마다 사용자가 스크롤한 scrollHeight의 비율을 계산합니다.

document.addEventListener("scroll&q>uot;, () = {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

다음 데모에서는 CSS와 함께 새 API를 사용하여 동일한 진행률 표시줄을 보여줍니다.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

새로운 animation-timeline CSS 기능은 스크롤 범위의 위치를 진행률(%)로 자동 변환하므로 모든 작업을 처리합니다.

이제 흥미로운 부분을 살펴보겠습니다. 두 버전의 웹사이트에 메인 스레드 리소스의 대부분을 차지하는 매우 무거운 계산을 구현했다고 가정해 보겠습니다.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

예상하셨겠지만 기본 스레드 리소스 접합으로 인해 기존 JavaScript 버전이 불안정해지고 느려집니다. 반면 CSS 버전은 무거운 JavaScript 작업의 영향을 전혀 받지 않으며 사용자의 스크롤 상호작용에 응답할 수 있습니다.

다음 스크린샷과 같이 DevTools의 CPU 사용량은 완전히 다릅니다.

다음 데모는 CyberAgent에서 만든 스크롤 기반 애니메이션의 애플리케이션을 보여줍니다. 스크롤하면 사진이 서서히 나타나는 것을 확인할 수 있습니다.

새 스크롤 기반 애니메이션 JavaScript API와 기존 JavaScript 비교

새 API의 이점은 CSS에만 국한되지 않습니다. JavaScript를 사용하여 부드러운 스크롤 기반 애니메이션을 만들 수도 있습니다. 다음 예를 참고하세요.

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

이렇게 하면 JavaScript만 사용하여 이전 CSS 데모에 표시된 것과 동일한 진행률 표시줄 애니메이션을 만들 수 있습니다. 기본 기술은 CSS 버전과 동일합니다. 이 API는 기본 스레드 리소스를 최대한 적게 사용하므로 기존 JavaScript 접근 방식에 비해 애니메이션이 훨씬 더 부드럽습니다.

또한 이 새로운 API는 기존 Web Animations API (WAAPI) 및 CSS Animations API와 함께 작동하여 선언적 스크롤 기반 애니메이션을 지원합니다.

추가 데모 및 리소스

이 데모 사이트를 통해 스크롤 기반 애니메이션의 다양한 구현을 확인할 수 있습니다. 여기에서 CSS 및 JavaScript의 이러한 새 API를 사용하는 데모를 비교할 수 있습니다.

새로운 스크롤 기반 애니메이션에 대해 자세히 알아보려면 이 도움말과 I/O 2023 강연을 확인하세요.