Casestudy's van scrollgestuurde animaties

Stay organized with collections Save and categorize content based on your preferences.

Swetha Gopalakrishnan

Saurabh Rajpal

Scroll-gestuurde animaties zijn een veelvoorkomend UX-patroon op het web. Een scroll-gestuurde animatie is gekoppeld aan de scrollpositie van een scrollcontainer. Dit betekent dat wanneer u omhoog of omlaag scrolt, de gekoppelde animatie direct naar voren of achteren scrolt. Voorbeelden hiervan zijn effecten zoals parallax-achtergrondafbeeldingen of leesindicatoren die meebewegen met het scrollen.

Ontwikkelaars hebben scroll-gestuurde animaties meestal gemaakt met behulp van JavaScript om te reageren op scrollgebeurtenissen in de hoofdthread. Dit maakt het moeilijk om performante scroll-gestuurde animaties te maken die synchroon lopen met scrollen, omdat scrollgebeurtenissen asynchroon worden geleverd. Bovendien leidt het vaak tot haperingen omdat ze zich in de hoofdthread bevinden.

Dankzij de nieuwe CSS- en UI-functies die nu beschikbaar zijn in browsers , kunt u nu declaratieve, scrollgestuurde animaties maken. Met Scroll Timelines en View Timelines, nieuwe concepten die integreren met de bestaande Web Animations API (WAAPI) en CSS Animations API , kunt u nu zijdezachte, scrollgestuurde animaties maken die direct vanuit de hoofdthread lopen, met slechts een paar regels code. Ontdek in deze casestudy hoe Tokopedia, redBus en Policybazaar al profiteren van deze nieuwe functie.

Tokopedia

Tokopedia heeft hun eerdere aangepaste JavaScript-implementaties vervangen door scroll-aangedreven animaties om de paginaprestaties te optimaliseren en de algehele browse-ervaring in hun e-commerce conversiefunnel te verbeteren.

We zijn erin geslaagd om tot 80% van onze coderegels te reduceren vergeleken met het gebruik van conventionele JavaScript-scrollgebeurtenissen en hebben waargenomen dat het gemiddelde CPU-gebruik daalde van 50% naar 2% tijdens het scrollen - Andy Wihalim , Senior Software Engineer, Tokopedia

Code

De volgende implementatie gebruikt de scroll() -functie om een ​​anonieme scrollvoortgangstijdlijn in te stellen om de voortgang van de CSS-animatie te beheren. De zichtbaarheid van de bovenste sticky balk verandert op basis van de scrollpositie binnen het gedefinieerde 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',
});

rodeBus

RedBus heeft verschillende animaties voor mobiel en desktop op hun 'things-to-do'- landingspagina, die vroeg in de conversiefunnel aan alle gebruikers wordt getoond. Met scroll-gestuurde animaties konden ze deze aangepaste JavaScript-implementaties vervangen door CSS om hetzelfde effect te bereiken.

Gebruiksscenario's

Fotogalerij met Image Reveal (voor mobiel) en Cover Flow (voor desktop).

Code (Mobiel)

In het vorige voorbeeld gebruikte Tokopedia de anonieme scrollvoortgangstijdlijn . In de volgende code gebruikt redBus de benoemde weergavevoortgangstijdlijn . De animatie verandert de opacity en clip-path van het <img> -element binnen het gedefinieerde animation-range binnen de dichtstbijzijnde voorouder-scroller van het element, in dit geval de fotogalerij-scroller.

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

We zijn erg blij met deze functie, want het is een perfecte combinatie van prestaties en een betere ervaring, wat onze Page Experience-signalen voor SEO versterkt. Bovendien maakt de minimale leercurve het een must-have voor elke e-commercewebsite. We hebben ook positieve feedback en ondersteuning ontvangen van andere teams om SDA te gebruiken voor meer gebruikerservaringen . — Amit Kumar , Senior Engineering Manager, redBus .

Policybazaar

Het vergelijken van verzekeringsplannen is een herhaaldelijke, belangrijke actie die gebruikers ondernemen om hun besluitvormingsproces te sturen. Met behulp van scroll-gestuurde animaties verkleinde Policybazaar de grootte van elementen met lage prioriteit als reactie op het scrollen van de gebruiker door de tabel. Dit resulteerde in een soepele scrollervaring en verbeterde de leesbaarheid.

Met scroll-aangedreven animaties konden we de viewport-ruimte maximaliseren voor de gebruiker om plannen te vergelijken, wat zorgde voor een gerichte en overzichtelijke leeservaring . — Rishabh Mehrotra , Hoofd Ontwerp voor Life Insurance BU, PolicyBazaar .

Code

Net als in het vorige voorbeeld van Tokopedia gebruikt Policybazaar de functie scroll() om een ​​anonieme scrollvoortgangstijdlijn in te stellen om de voortgang van de CSS-animatie te beheren. In dit geval wordt de lettergrootte verkleind en de header vervaagd op basis van de scrollpositie binnen het gedefinieerde 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;
  }
}

Scroll-gedreven animaties als een veelvoorkomend patroon in de gebruikersreis

Alle genoemde e-commercebedrijven gebruikten scroll-animaties op pagina's met kaarten, waardoor kaarten geanimeerd werden om de aandacht van de gebruiker te trekken. De volgende voorbeelden tonen scrolleffecten op kaarten in verschillende delen van de gebruikersreis. Dit wordt meestal bereikt met behulp van een anonieme weergavevoortgangstijdlijn om de voortgang van de aangepaste CSS-animatie te beheren, zoals te zien is in het volgende CSS-fragment.

@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 (Homepage)

Policybazaar (Productlijstpagina)

Tokopedia (Productdetailpagina)

Waar u op moet letten bij het gebruik van de Scroll-driven Animations API

Het is mogelijk om scroll-gestuurde animaties te polyfillen voor browsers die deze niet ondersteunen, bijvoorbeeld met de Scroll-timeline polyfill . Als u dit doet, vereist dit aanvullende tests om er zeker van te zijn dat het goed werkt in combinatie met uw framework en dat browsers die de polyfill gebruiken geen animatiefouten of haperende ervaringen ervaren.

Vanuit CSS kun je @supports gebruiken om de ondersteuning van de animatietijdlijn te testen voordat je scroll-gestuurde animaties gebruikt. Bijvoorbeeld:

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

}

Bronnen

• Demo's van scroll-gestuurde animaties
• Animeer elementen tijdens het scrollen met scroll-gestuurde animaties
• Codelab: Aan de slag met scroll-gestuurde animaties in CSS
• Chrome-extensie: scroll-gestuurde animatiedebugger
• Scroll-tijdlijn Polyfill
• Wil je een bug of nieuwe feature melden? We horen graag van je !

Ontdek de andere artikelen in deze serie die gaan over hoe e-commercebedrijven profiteren van nieuwe CSS- en UI-functies zoals View Transitions, Popover, Container Queries en de has() selector.

• Waarom zijn web-UI-mogelijkheden belangrijk voor uw e-commercesite?
• Bekijk casestudy's van Transitions
• Popover API-casestudies
• Casestudies over containerquery's
• :has() selector casestudies