스크롤 기반 애니메이션 우수사례

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

스크롤 기반 애니메이션은 웹에서 일반적인 UX 패턴입니다. 스크롤 기반 애니메이션은 스크롤 컨테이너의 스크롤 위치에 연결됩니다. 즉, 위 또는 아래로 스크롤하면 연결된 애니메이션이 직접 반응으로 앞뒤로 스크러빙됩니다. 스크롤할 때 움직이는 시차 배경 이미지 또는 읽기 표시기와 같은 효과를 예로 들 수 있습니다.

개발자는 일반적으로 자바스크립트를 사용하여 기본 스레드의 스크롤 이벤트에 응답하여 스크롤 기반 애니메이션을 만듭니다. 따라서 스크롤 이벤트가 비동기식으로 전달되므로 스크롤과 동기화되는 성능 좋은 스크롤 기반 애니메이션을 만들기가 어렵고 기본 스레드에 있기 때문에 버벅거림이 발생하는 경우가 많습니다.

그러나 새로운 브라우저에 CSS 및 UI 기능 방문의 일환으로 이제 선언적 스크롤 기반 애니메이션을 만들 수 있습니다. 기존 Web Animations API (WAAPI) 및 CSS Animations API와 통합되는 새로운 개념인 스크롤 타임라인 및 뷰 타임라인을 사용하면 단 몇 줄의 코드로 기본 스레드에서 원활하게 스크롤되는 애니메이션을 실행할 수 있습니다. 이 우수사례에서 Tokopedia, redBus, Policybazaar가 이 새로운 기능을 어떻게 활용하고 있는지 알아보세요.

브라우저 지원

  • 115
  • 115
  • x

소스

Tokopedia

Tokopedia는 페이지 성능을 최적화하고 전자상거래 전환 유입경로 전반에서 전반적인 탐색 환경을 개선하기 위해 이전의 맞춤 JavaScript 구현을 스크롤 기반 애니메이션으로 대체했습니다.

기존 자바스크립트 스크롤 이벤트를 사용할 때보다 코드 줄의 최대 80% 를 줄일 수 있었으며, 스크롤하는 동안 평균 CPU 사용량이 50% 에서 2% 로 줄어든 것으로 확인되었습니다. 앤디 와할림, Tokopedia 선임 소프트웨어 엔지니어

사용자 스크롤 위치에 따라 상단 고정 막대의 공개 상태가 변경되는 애니메이션

코드

다음 구현에서는 scroll() 함수를 사용하여 CSS 애니메이션의 진행률을 제어하기 위한 익명 스크롤 진행률 타임라인을 설정합니다. 상단 고정 막대의 표시 여부는 정의된 animationRange 내의 스크롤 위치에 따라 변경됩니다.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

redBus의 할 일 방문 페이지에는 모바일과 데스크톱에 맞춰 서로 다른 애니메이션이 표시되며, 이러한 애니메이션은 전환 유입경로 초기에 모든 사용자에게 표시됩니다. 스크롤 기반 애니메이션을 통해 이러한 맞춤 JavaScript 구현을 CSS로 대체하여 동일한 효과를 얻을 수 있었습니다.

사용 사례

이미지 표시 (모바일용) 및 표지 흐름 (데스크톱용)이 있는 사진 갤러리

redBus '할 일' 사진 갤러리의 이미지를 로드하는 스크롤 기반 애니메이션 이미지 표시 효과

코드 (모바일)

이전 예에서 Tokopedia는 익명 스크롤 진행률 타임라인을 사용했습니다. 다음 코드에서 redBus는 이름이 지정된 뷰 진행률 타임라인을 사용합니다. 애니메이션은 요소의 가장 가까운 상위 스크롤러(이 경우 사진 갤러리 스크롤러) 내에 있는 정의된 animation-range 내에서 <img> 요소의 opacity 및 clip-path를 변경합니다.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

이 기능은 성능과 더 나은 경험을 완벽하게 결합하여 검색엔진 최적화를 위한 페이지 경험 신호를 강화해 주므로 매우 기쁘게 생각합니다. 또한 최소한의 학습 곡선으로 모든 전자상거래 웹사이트에서 반드시 갖춰야 할 기술입니다. 또한 더 많은 사용자 여정에 SDA를 활용하려는 다른 팀으로부터 긍정적인 의견과 지원을 받았습니다. 아밋 쿠마르, redBus 선임 엔지니어링 관리자

정책바자(Policybazaar)

보험 상품 비교는 사용자가 의사 결정 프로세스를 안내하기 위해 취하는 반복적인 주요 작업입니다. Policybazaar는 스크롤 기반 애니메이션을 사용하여 사용자가 테이블을 스크롤할 때 우선순위가 낮은 요소의 크기를 줄였습니다. 이렇게 하면 매끄러운 스크롤 경험을 제공하면서도 가독성을 높일 수 있습니다.

스크롤 기반 애니메이션을 통해 사용자가 요금제를 비교할 수 있도록 표시 영역 공간을 최대화하여 집중적이고 깔끔한 읽기 환경을 보장할 수 있었습니다. 리샤브 메로트라, PolicyBazaar 생명보험 BU 디자인 책임자.

투자 및 수명 LOB (비즈니스 라인)의 비교 계획 표에 표시된 스크롤 기반 애니메이션 animate-timeline입니다.

코드

Tokopedia의 이전 예와 마찬가지로 Policybazaar는 CSS 애니메이션의 진행률을 제어하기 위해 scroll() 함수를 사용하여 익명 스크롤 진행률 타임라인을 설정합니다. 이 경우 정의된 animation-range 내의 스크롤 위치에 따라 글꼴 크기를 줄이고 헤더를 희미하게 만듭니다.

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

사용자 경험 전반에서 일반적인 패턴으로 사용되는 스크롤 기반 애니메이션

모든 전자상거래 기업들은 카드가 있는 페이지에 스크롤 기반 애니메이션을 사용하여 사용자의 관심을 끌기 위해 카드에 애니메이션을 적용했습니다 . 다음 예는 사용자 여정의 다양한 부분에서 카드의 스크롤 효과를 보여줍니다. 이 작업은 일반적으로 다음 CSS 스니펫과 같이 맞춤 CSS 애니메이션의 진행률을 제어하는 익명 뷰 진행률 타임라인을 사용하여 실행됩니다.

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (홈페이지)

redBus '할 일' 방문 페이지에 제품 카드를 로드하는 스크롤 기반 애니메이션 플라이인 효과

Policybazaar (제품 목록 페이지)

투자 및 생명 LOB(비즈니스 라인)의 스크롤 기반 애니메이션 페이드 인, 페이드 아웃.

Tokopedia (제품 세부정보 페이지)

나열된 제품을 스크롤하는 동안 페이드 인, 페이드 아웃 애니메이션

스크롤 기반 Animations API 사용 시 고려할 사항

지원되지 않는 브라우저에서는 스크롤 기반 애니메이션을 폴리필할 수 있습니다(예: 스크롤 타임라인 폴리필). 이 경우 추가 테스트를 통해 프레임워크와 함께 제대로 작동하는지, 폴리필을 사용하는 브라우저에서 애니메이션 실패나 버벅거림이 발생하지 않는지 확인해야 합니다.

스크롤 기반 애니메이션을 사용하기 전에 CSS에서 @supports를 사용하여 애니메이션 타임라인 지원을 테스트할 수 있습니다. 예를 들면 다음과 같습니다.

@supports (animation-timeline: scroll()) {

}

자료

이 시리즈의 다른 도움말을 통해 전자상거래 회사가 뷰 전환, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 어떤 이점을 얻었는지 알아보세요.