Casestudy's van scrollgestuurde animaties

Swetha Gopalakrishnan

Saurabh Rajpal

Scrollgestuurde animaties zijn een veelvoorkomend UX-patroon op internet. Een scrollgestuurde animatie is gekoppeld aan de scrollpositie van een scrollcontainer. Dit betekent dat terwijl u omhoog of omlaag scrolt, de gekoppelde animatie als directe reactie vooruit of achteruit beweegt. Voorbeelden hiervan zijn effecten zoals parallax-achtergrondafbeeldingen of leesindicatoren die bewegen terwijl u scrollt.

Ontwikkelaars hebben doorgaans scroll-gestuurde animaties gemaakt door JavaScript te gebruiken om te reageren op scroll-gebeurtenissen in de hoofdthread. Dit maakt het moeilijk om performante scrollgestuurde animaties te maken die synchroon lopen met scrollen, omdat scrollgebeurtenissen asynchroon worden afgeleverd, en leidt vaak tot janken omdat ze zich in de hoofdthread bevinden.

Als onderdeel van de nieuwe CSS- en UI-functies die in browsers verschijnen , kunt u nu echter 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 krijgen die vanuit de hoofdlijn lopen, met slechts een paar regels code. Ontdek in deze casestudy hoe Tokopedia, redBus en Policybazaar al profiteren van deze nieuwe functie.

Tokopedia

Tokopedia verving hun eerdere aangepaste JavaScript-implementaties door scrollgestuurde animaties om de paginaprestaties te optimaliseren en de algehele browse-ervaring in hun e-commerceconversietrechter te verbeteren.

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

Code

De volgende implementatie gebruikt de functie scroll() om een ​​anonieme scrollvoortgangstijdlijn in te stellen voor het controleren van de voortgang van de CSS-animatie. De zichtbaarheid van de bovenste plakbalk verandert op basis van de schuifpositie 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 'dingen-to-do' -bestemmingspagina, die vroeg in de conversietrechter aan alle gebruikers wordt getoond. Met scrollgestuurde animaties konden ze deze aangepaste JavaScript-implementaties vervangen door CSS om hetzelfde effect te bereiken.

Gebruiksgevallen

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 in de dichtstbijzijnde voorloper-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, omdat het een perfecte mix is ​​van prestaties en een betere ervaring, waardoor onze Page Experience-signalen voor SEO worden versterkt. Bovendien maakt de minimale leercurve het een must-have voor elke e-commerce website. We kregen ook positieve feedback en ondersteuning van andere teams om SDA in te zetten voor meer gebruikerstrajecten.— Amit Kumar , Senior Engineering Manager, redBus .

Beleidsbazaar

Het vergelijken van verzekeringsplannen is een herhaaldelijke belangrijke actie die gebruikers ondernemen om hun besluitvormingsproces te begeleiden. Met behulp van scroll-gestuurde animaties verkleinde Policybazaar de grootte van elementen met een lage prioriteit als reactie op het feit dat de gebruiker door de tabel scrolde. Dit resulteerde in een sierlijke scrollervaring terwijl de leesbaarheid werd verbeterd.

Met scrollgestuurde animaties konden we de viewport-ruimte maximaliseren zodat de gebruiker plannen kon vergelijken, waardoor een gerichte en overzichtelijke leeservaring werd gegarandeerd . — Rishabh Mehrotra , hoofd van Design for 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 voor het controleren van de voortgang van de CSS-animatie. In dit geval wordt de lettergrootte verkleind en de koptekst 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;
  }
}

Scrollgestuurde animaties als een gemeenschappelijk patroon tijdens het gebruikerstraject

Alle aanbevolen e-commercebedrijven gebruikten scrollgestuurde animaties op pagina's met kaarten, waardoor kaarten werden geanimeerd om de aandacht van de gebruiker erop te vestigen. De volgende voorbeelden tonen scrolleffecten op kaarten in verschillende delen van de gebruikersreis. Dit wordt meestal bereikt met behulp van een anonieme voortgangstijdlijn voor het controleren van de voortgang van de aangepaste CSS-animatie, zoals weergegeven 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 (startpagina)

Beleidbazaar (productvermeldingspagina)

Tokopedia (pagina met productdetails)

Dingen waarmee u rekening moet houden bij het gebruik van de Scroll-driven Animations API

Het is mogelijk om scroll-gestuurde animaties te polyfillen voor niet-ondersteunende browsers, bijvoorbeeld met de Scroll-timeline polyfill . Als u dat doet, zijn aanvullende tests nodig om er zeker van te zijn dat het goed samenwerkt met uw raamwerk, en dat browsers die de polyfill gebruiken geen animatiefouten of janky-ervaringen ervaren.

Vanuit CSS kunt u @supports gebruiken om de ondersteuning van de animatietijdlijn te testen voordat u scrollgestuurde animaties gebruikt. Bijvoorbeeld:

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

}

Bronnen

• Scrollgestuurde animatiedemo's
• Animeer elementen tijdens het scrollen met scrollgestuurde animaties
• Codelab: Aan de slag met scrollgestuurde animaties in CSS
• Chrome-extensie: scrollgestuurde animatie-foutopsporing
• Scroll-tijdlijn Polyfill
• Wilt u een bug of nieuwe functie melden? Wij willen van u horen !

Ontdek de andere artikelen in deze serie waarin wordt besproken hoe e-commercebedrijven profiteerden van het gebruik 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 de casestudy's van Transitions
• Popover API-casestudy's
• Casestudy's voor containerquery's
• :has() selector-casestudies