Animacje przewijane – studia przypadków

Swetha Gopalakrishnan

Saurabh Rajpal

Animacje sterowane przewijaniem to popularny wzorzec UX w internecie. Animacja sterowana przewijaniem jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że podczas przewijania w górę lub w dół połączona animacja będzie przewijana do przodu lub do tyłu w bezpośredniej reakcji na przewijanie. Przykładem są efekty takie jak obrazy tła z efektem paralaksy czy wskaźniki czytania, które przesuwają się podczas przewijania.

Programiści zwykle tworzyli animacje wywoływane przewijaniem za pomocą JavaScriptu, aby reagować na zdarzenia przewijania w głównym wątku. Utrudnia to tworzenie wydajnych animacji opartych na przewijaniu, które są zsynchronizowane z przewijaniem, ponieważ zdarzenia przewijania są dostarczane asynchronicznie i często powodują zacinanie się ze względu na to, że działają w wątku głównym.

Jednak w ramach nowych funkcji CSS i interfejsu użytkownika, które pojawiają się w przeglądarkach, możesz teraz tworzyć deklaratywne animacje oparte na przewijaniu. Dzięki osiom czasu przewijania i wyświetlania, czyli nowym koncepcjom zintegrowanym z obecnymi interfejsem Web Animations API (WAAPI) i interfejsem CSS Animations API, możesz teraz tworzyć płynne animacje oparte na przewijaniu, które działają poza głównym wątkiem i wymagają tylko kilku wierszy kodu. Z tego studium przypadku dowiesz się, jak Tokopedia, redBus i Policybazaar korzystają już z tej nowej funkcji.

Tokopedia

Firma Tokopedia zastąpiła dotychczasowe niestandardowe implementacje JavaScriptu animacjami opartymi na przewijaniu, aby zoptymalizować wydajność strony i poprawić ogólne wrażenia z przeglądania w całym lejku konwersji e-commerce.

W porównaniu z tradycyjnymi zdarzeniami przewijania w JavaScript udało nam się zmniejszyć liczbę wierszy kodu nawet o 80%. Zaobserwowaliśmy też, że średnie wykorzystanie procesora podczas przewijania zmniejszyło się z 50% do 2% – Andy Wihalim, starszy inżynier oprogramowania, Tokopedia

Kod

W poniższej implementacji użyto funkcji scroll(), aby ustawić anonimową oś czasu postępu przewijania do kontrolowania postępu animacji CSS. Widoczność górnego paska przyklejonego zmienia się w zależności od pozycji przewijania w określonym elemencie 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

Na stronie docelowej things-to-do redBus ma różne animacje na urządzenia mobilne i komputery. Strona ta jest wyświetlana wszystkim użytkownikom na wczesnym etapie ścieżki konwersji. Dzięki animacjom opartym na przewijaniu udało im się zastąpić te niestandardowe implementacje JavaScriptu kodem CSS, aby uzyskać ten sam efekt.

Przypadki użycia

Galeria zdjęć z efektem Image Reveal (na urządzeniach mobilnych) i Cover Flow (na komputerach).

Kod (urządzenia mobilne)

W poprzednim przykładzie Tokopedia użyła anonimowej osi czasu postępu przewijania. W poniższym kodzie redBus używa named view progress timeline. Animacja zmienia wartości opacity i clip-path elementu <img> w zdefiniowanym animation-range w najbliższym przodku elementu, który jest przewijany, czyli w tym przypadku w przewijanej galerii zdjęć.

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%;
   }
`;

Bardzo nas cieszy ta funkcja, ponieważ doskonale łączy wydajność z lepszymi wrażeniami użytkowników, co wzmacnia sygnały dotyczące jakości strony na potrzeby SEO. Dodatkowo minimalna krzywa uczenia się sprawia, że jest to niezbędne narzędzie dla każdej witryny e-commerce. Otrzymaliśmy też pozytywne opinie i wsparcie od innych zespołów, które chciałyby wykorzystać SDA w przypadku większej liczby ścieżek użytkowników. Amit Kumar, starszy menedżer ds. inżynierii, redBus

Policybazaar

Porównywanie planów ubezpieczeniowych to powtarzające się kluczowe działanie podejmowane przez użytkowników w celu ułatwienia sobie procesu decyzyjnego. Dzięki animacjom opartym na przewijaniu firma Policybazaar zmniejszyła rozmiar elementów o niskim priorytecie w odpowiedzi na przewijanie tabeli przez użytkownika. Dzięki temu przewijanie jest płynniejsze, a czytelność lepsza.

Dzięki animacjom wywoływanym przez przewijanie udało nam się zmaksymalizować przestrzeń widoku, aby użytkownik mógł porównać plany, co zapewniło mu skupienie i czytelność. – Rishabh Mehrotra, dyrektor ds. projektowania w jednostce biznesowej ubezpieczeń na życie, PolicyBazaar

Kod

Podobnie jak w poprzednim przykładzie z Tokopedia, Policybazaar używa funkcji scroll() do ustawienia anonimowej osi czasu postępu przewijania, aby kontrolować postęp animacji CSS. W tym przypadku zmniejszanie rozmiaru czcionki i przyciemnianie nagłówka w zależności od pozycji przewijania w określonym 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;
  }
}

Animacje wywoływane przewijaniem jako powszechny wzorzec na ścieżce użytkownika

Wszystkie wyróżnione firmy z branży e-commerce używały na stronach z kartami animacji wywoływanych przewijaniem, aby przyciągać uwagę użytkowników do kart . W przykładach poniżej pokazano efekty przewijania kart w różnych częściach ścieżki użytkownika. Zwykle osiąga się to za pomocą anonimowej osi czasu postępu wyświetlania do kontrolowania postępu niestandardowej animacji CSS, jak pokazano w tym fragmencie kodu 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 (strona główna)

Policybazaar (strona z informacjami o produkcie)

Tokopedia (strona ze szczegółami produktu)

Co należy wziąć pod uwagę podczas korzystania z interfejsu Scroll-driven Animations API

Animacje oparte na przewijaniu można obsłużyć w przeglądarkach, które ich nie obsługują, np. za pomocą kodu polyfill osi czasu przewijania. Jeśli to zrobisz, konieczne będzie dodatkowe testowanie, aby upewnić się, że działa on prawidłowo z Twoim frameworkiem i że przeglądarki korzystające z polyfillu nie powodują błędów animacji ani nie działają niepłynnie.

W arkuszu CSS możesz użyć @supports, aby sprawdzić, czy przeglądarka obsługuje właściwość animation-timeline, zanim użyjesz animacji opartych na przewijaniu. Na przykład:

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

}

Zasoby

• Prezentacje animacji sterowanych przewijaniem
• Animowanie elementów podczas przewijania za pomocą animacji opartych na przewijaniu
• Codelab: Wprowadzenie do animacji opartych na przewijaniu w CSS
• Rozszerzenie do Chrome: debuger animacji sterowanej przewijaniem
• Scroll-timeline Polyfill
• Chcesz zgłosić błąd lub zaproponować nową funkcję? Chętnie poznamy Twoją opinię.

Przeczytaj inne artykuły z tej serii, w których opisujemy, jak firmy e-commerce skorzystały z nowych funkcji CSS i UI, takich jak View Transitions, Popover, Container Queries i selektor has().

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Zobacz studia przypadków dotyczące przejść
• Przykłady użycia interfejsu Popover API
• Studia przypadków dotyczące zapytań o kontenery
• Studia przypadków dotyczące selektora:has()