Deze pagina is vertaald door de Cloud Translation API.

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.

Browserondersteuning

Bron

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

Geanimeerde veranderende zichtbaarheid van de bovenste plakbalk op basis van de scrollpositie van de gebruiker.

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-te-doen'- 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).

Scrollgestuurd animatiebeeld onthult effect voor het laden van afbeeldingen in de redBus "Things To Do" fotogalerij.

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 .

Scrollgestuurde animatie animate-timeline op vergelijkingsplantabel in Investment and Life LOB (Line of Business).

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 doorgaans 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)

Scrollgestuurd animatie-fly-in-effect voor het laden van productkaarten op de redBus-bestemmingspagina 'Wat te doen'.

Beleidbazaar (productvermeldingspagina)

Scroll-gestuurde animatie fade-in, fade-out van productkaarten in Investment en Life LOB (Line of Business).

Tokopedia (pagina met productdetails)

Fade-in, Fade-out-animatie tijdens het scrollen door de vermelde producten.

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.