Scrollgestuurde animaties zijn een veelvoorkomend UX-patroon op het web. Een scrollgestuurde animatie is gekoppeld aan de scrollpositie van een scrollcontainer. Dit betekent dat wanneer je omhoog of omlaag scrollt, de gekoppelde animatie direct vooruit of achteruit beweegt. Voorbeelden hiervan zijn effecten zoals parallax-achtergrondafbeeldingen of leesindicatoren die meebewegen tijdens het scrollen.
Ontwikkelaars maken doorgaans scroll-gestuurde animaties door JavaScript te gebruiken om te reageren op scrollgebeurtenissen op de hoofdthread. Dit maakt het lastig om performante scroll-gestuurde animaties te creëren die synchroon lopen met het scrollen, omdat scrollgebeurtenissen asynchroon worden afgeleverd, en leidt vaak tot haperingen doordat de animaties op de hoofdthread worden uitgevoerd.
Als onderdeel van de nieuwe CSS- en UI-functies die in browsers worden geïntroduceerd , is het nu mogelijk om declaratieve, scrollgestuurde animaties te creëren. Met Scroll Timelines en View Timelines, nieuwe concepten die integreren met de bestaande Web Animations API (WAAPI) en CSS Animations API , kunt u nu vloeiende, scrollgestuurde animaties buiten de hoofdthread laten draaien met slechts een paar regels code. In deze casestudy ontdekt u hoe Tokopedia, redBus en Policybazaar al profiteren van deze nieuwe functie.
Tokopedia
Tokopedia heeft hun eerdere, op maat gemaakte JavaScript-implementaties vervangen door scroll-gestuurde animaties om de paginaprestaties te optimaliseren en de algehele browse-ervaring in hun e-commerce conversietrechter te verbeteren.
We zijn erin geslaagd om tot 80% van onze code te verminderen in vergelijking met het gebruik van conventionele JavaScript-scrollgebeurtenissen en hebben geconstateerd dat het gemiddelde CPU-gebruik tijdens het scrollen is gedaald van 50% naar 2% . — Andy Wihalim , Senior Software Engineer, Tokopedia
Code
De volgende implementatie gebruikt de scroll() `-functie om een anonieme scrollvoortgangstijdlijn in te stellen waarmee de voortgang van de CSS-animatie wordt beheerd. De zichtbaarheid van de bovenste, vastgeplakte 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',
});
rode bus
redBus gebruikt verschillende animaties voor mobiel en desktop op hun takenlijstpagina , die vroeg in de conversietrechter aan alle gebruikers wordt getoond. Dankzij scroll-gestuurde animaties konden ze deze aangepaste JavaScript-implementaties vervangen door CSS om hetzelfde effect te bereiken.
Gebruiksvoorbeelden
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 wijzigt de opacity en clip-path van het <img> -element binnen het gedefinieerde animation-range in 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, omdat het een perfecte combinatie is van prestaties en een betere gebruikerservaring, waardoor onze Page Experience-signalen voor SEO worden versterkt. Bovendien maakt de minimale leercurve het een onmisbare tool voor elke e-commerce website. We hebben ook positieve feedback en steun ontvangen van andere teams om SDA voor meer gebruikerstrajecten in te zetten . — Amit Kumar , Senior Engineering Manager, redBus .
Policybazaar
Het vergelijken van verzekeringsplannen is een belangrijke, terugkerende handeling die gebruikers uitvoeren om hun besluitvormingsproces te sturen. Door middel van scroll-gestuurde animaties verkleinde Policybazaar de grootte van minder belangrijke elementen wanneer de gebruiker door de tabel scrolde. Dit resulteerde in een vloeiende scrollervaring en verbeterde tegelijkertijd de leesbaarheid.
Met scroll-gestuurde animaties konden we de beschikbare ruimte in het scherm maximaliseren, waardoor de gebruiker plannen optimaal kon vergelijken en een gerichte en overzichtelijke leeservaring kreeg . — Rishabh Mehrotra , Hoofd Design voor de Life Insurance Business Unit, PolicyBazaar .
animate-timeline ) op de vergelijkingstabel van plannen in de bedrijfslijn Beleggingen en Levensverzekeringen. Code
Net als in het vorige voorbeeld van Tokopedia gebruikt Policybazaar de scroll() -functie om een anonieme scrollvoortgangstijdlijn in te stellen waarmee de voortgang van de CSS-animatie wordt geregeld. 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;
}
}
Scroll-gestuurde animaties als een veelvoorkomend patroon in het gebruikerstraject.
Alle getoonde e-commercebedrijven gebruikten scroll-gestuurde animaties op pagina's met kaarten, waarbij de kaarten werden geanimeerd om de aandacht van de gebruiker erop te vestigen. De volgende voorbeelden laten scroll-effecten op kaarten zien in verschillende fasen van de gebruikersreis. Dit wordt doorgaans bereikt met behulp van een anonieme voortgangsweergave om de voortgang van de aangepaste CSS-animatie te beheren, 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)
Policybazaar (Productoverzichtspagina)
Tokopedia (Productdetails pagina)
Aandachtspunten bij het gebruik van de Scroll-driven Animations API
Het is mogelijk om scroll-gestuurde animaties te polyfillen voor browsers die ze niet ondersteunen, bijvoorbeeld met de Scroll-timeline polyfill . Als je dit doet, is extra testen nodig om er zeker van te zijn dat het goed werkt met je framework en dat browsers die de polyfill gebruiken geen animatiefouten of haperingen vertonen.
Vanuit CSS kun je @supports gebruiken om te testen of `animation-timeline` wordt ondersteund voordat je scroll-gestuurde animaties gebruikt. Bijvoorbeeld:
@supports (animation-timeline: scroll()) {
}
Bronnen
- Demonstraties van scroll-gestuurde animaties
- Animeer elementen tijdens het scrollen met scrollgestuurde animaties.
- Codelab: Aan de slag met scroll-gestuurde animaties in CSS
- Chrome-extensie: Scroll-gestuurde animatiedebugger
- Scroll-tijdlijn Polyfill
- Wil je een bug of een nieuwe functie melden? We horen graag van je !
Ontdek de andere artikelen in deze serie over hoe e-commercebedrijven profiteerden van nieuwe CSS- en UI-functies zoals View Transitions, Popover, Container Queries en de has() selector.