Animeer elementen tijdens het scrollen met scrollgestuurde animaties

Leer hoe u met Scroll-tijdlijnen en View-tijdlijnen kunt werken om op een declaratieve manier scroll-gestuurde animaties te maken.

Bramus

Gepubliceerd: 5 mei 2023

Scrollgestuurde animaties

Browserondersteuning

  • Chroom: 115.
  • Rand: 115.
  • Firefox: achter een vlag.
  • Safari: niet ondersteund.

Bron

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.

Een leesindicator bovenop een document, aangedreven door scrollen.

Een soortgelijk type scrollgestuurde animatie is een animatie die is gekoppeld aan de positie van een element binnen zijn scrollcontainer. Hiermee kunnen bijvoorbeeld elementen vervagen zodra ze in beeld komen.

De afbeeldingen op deze pagina vervagen zodra ze in beeld komen.

De klassieke manier om dit soort effecten te bereiken is door te reageren op scrollgebeurtenissen in de hoofdthread , wat tot twee hoofdproblemen leidt:

  • Moderne browsers voeren het scrollen uit via een afzonderlijk proces en leveren daarom scrollgebeurtenissen asynchroon af.
  • Hoofdthreadanimaties zijn onderhevig aan jank .

Dit maakt het creëren van performante scroll-gestuurde animaties die synchroon zijn met scrollen onmogelijk of zeer moeilijk.

Vanaf Chrome-versie 115 is er een nieuwe set API's en concepten die u kunt gebruiken om declaratieve scroll-gestuurde animaties mogelijk te maken: Tijdlijnen scrollen en Tijdlijnen bekijken.

Deze nieuwe concepten kunnen worden geïntegreerd met de bestaande Web Animations API (WAAPI) en CSS Animations API , waardoor ze de voordelen kunnen erven die deze bestaande API's met zich meebrengen. Dat omvat de mogelijkheid om scrollgestuurde animaties van de hoofdthread af te laten lopen. Ja, lees het goed: je kunt nu zijdezachte animaties krijgen, aangedreven door scrollen, die van de hoofdlijn aflopen, met slechts een paar regels extra code. Wat is er niet leuk aan?!

Animaties op internet, een kleine samenvatting

Animaties op internet met CSS

Om een ​​animatie in CSS te maken, definieert u een set keyframes met behulp van de @keyframes at-regel. Koppel het aan een element met behulp van de eigenschap animation-name en stel tegelijkertijd een animation-duration in om te bepalen hoe lang de animatie moet duren. Er zijn meer animation-* lange handeigenschappen beschikbaar animation-easing-function en animation-fill-mode om er maar een paar te noemen – die allemaal kunnen worden gecombineerd in de animation steno.

Hier is bijvoorbeeld een animatie die een element op de X-as vergroot en tegelijkertijd de achtergrondkleur verandert:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

Animaties op internet met JavaScript

In JavaScript kan de Web Animations API worden gebruikt om precies hetzelfde te bereiken. U kunt dit doen door nieuwe Animation en KeyFrameEffect instanties te maken, of door de veel kortere Element animate() -methode te gebruiken.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Dit visuele resultaat van het bovenstaande JavaScript-fragment is identiek aan de vorige CSS-versie.

Animatietijdlijnen

Standaard wordt een animatie die aan een element is gekoppeld, op de documenttijdlijn uitgevoerd. De oorsprongstijd begint bij 0 wanneer de pagina wordt geladen, en begint vooruit te tikken naarmate de kloktijd vordert. Dit is de standaard animatietijdlijn en tot nu toe de enige animatietijdlijn waartoe u toegang had.

De Scroll-driven Animations Specification definieert twee nieuwe typen tijdlijnen die u kunt gebruiken:

  • Scrollvoortgangstijdlijn : een tijdlijn die is gekoppeld aan de scrollpositie van een scrollcontainer langs een bepaalde as.
  • Voortgangstijdlijn bekijken : een tijdlijn die is gekoppeld aan de relatieve positie van een bepaald element binnen zijn schuifcontainer.

Blader door de voortgangstijdlijn

Een Scroll Progress Timeline is een animatietijdlijn die is gekoppeld aan de voortgang in de scrollpositie van een scrollcontainer (ook wel scrollport of scroller genoemd) langs een bepaalde as. Het converteert een positie in een scrollbereik naar een percentage van de voortgang.

De beginscrollpositie vertegenwoordigt 0% voortgang en de eindscrollpositie vertegenwoordigt 100% voortgang. In de volgende visualisatie kunt u zien dat de voortgang optelt van 0% tot 100% terwijl u de scroller van boven naar beneden scrolt.

Visualisatie van een scrollvoortgangstijdlijn. Terwijl u naar de onderkant van de scroller scrolt, telt de voortgangswaarde op van 0% tot 100%.

✨Probeer het zelf

Een Scroll-voortgangstijdlijn wordt vaak afgekort tot simpelweg “Scroll-tijdlijn”.

Bekijk de voortgangstijdlijn

Dit type tijdlijn is gekoppeld aan de relatieve voortgang van een bepaald element binnen een scrollcontainer. Net als bij een scrollvoortgangstijdlijn wordt de scroll-offset van een scroller bijgehouden. In tegenstelling tot een scrollvoortgangstijdlijn is het de relatieve positie van een onderwerp binnen die scroller die de voortgang bepaalt.

Dit is enigszins vergelijkbaar met de manier waarop IntersectionObserver werkt, die kan bijhouden hoeveel een element zichtbaar is in de scroller. Als het element niet zichtbaar is in de scroller, snijdt het niet. Als het zichtbaar is in de scroller (zelfs voor het kleinste deel) is het een kruispunt.

Een weergavevoortgangstijdlijn begint vanaf het moment dat een onderwerp de scroller begint te kruisen en eindigt wanneer het onderwerp stopt met het kruisen van de scroller. In de volgende visualisatie kun je zien dat de voortgang begint op te tellen vanaf 0% wanneer het onderwerp de scrollcontainer binnengaat en 100% bereikt op het moment dat het onderwerp de scrollcontainer heeft verlaten.

Visualisatie van een weergavevoortgangstijdlijn. De voortgang loopt op van 0% tot 100% naarmate het onderwerp (groene vakje) de scroller passeert.

✨Probeer het zelf

Een weergavevoortgangstijdlijn wordt vaak afgekort tot simpelweg “Bekijk tijdlijn”. Het is mogelijk om specifieke delen van een weergavetijdlijn te targeten op basis van de grootte van het onderwerp, maar daarover later meer.

Praktisch aan de slag met Scroll Progress Timelines

Een anonieme scrollvoortgangstijdlijn maken in CSS

De eenvoudigste manier om een ​​scrolltijdlijn in CSS te maken, is door de functie scroll() te gebruiken. Hierdoor wordt een anonieme Scroll-tijdlijn gemaakt die u kunt instellen als de waarde voor de nieuwe eigenschap animation-timeline .

Voorbeeld:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

De functie scroll() accepteert een <scroller> en een <axis> -argument.

Geaccepteerde waarden voor het <scroller> argument zijn de volgende:

  • nearest : gebruikt de dichtstbijzijnde voorouder-scrollcontainer (standaard) .
  • root : gebruikt de documentviewport als scrollcontainer.
  • self : gebruikt het element zelf als scrollcontainer.

Geaccepteerde waarden voor het argument <axis> zijn de volgende:

  • block : Gebruikt de voortgangsmaatstaf langs de blokas van de scrollcontainer (standaard) .
  • inline : gebruikt de voortgangsmaatstaf langs de inline-as van de schuifcontainer.
  • y : Gebruikt de voortgangsmaatstaf langs de y-as van de schuifcontainer.
  • x : gebruikt de voortgangsmaatstaf langs de x-as van de schuifcontainer.

Als u bijvoorbeeld een animatie wilt binden aan de root-scroller op de blokas, zijn de waarden die moeten worden doorgegeven aan scroll() root en block . Alles bij elkaar is de waarde scroll(root block) .

Demo: voortgangsindicator lezen

Deze demo heeft een leesvoortgangsindicator bovenaan de viewport. Terwijl u naar beneden scrollt op de pagina, groeit de voortgangsbalk totdat deze de volledige breedte van de viewport in beslag neemt wanneer u het einde van het document bereikt. Een anonieme Scroll Progress Timeline wordt gebruikt om de animatie aan te sturen.

Demo: voortgangsindicator lezen .

✨Probeer het zelf

De leesvoortgangsindicator wordt bovenaan de pagina geplaatst met behulp van een vaste positie. Om samengestelde animaties te kunnen gebruiken, wordt niet de width geanimeerd, maar wordt het element op de x-as verkleind met behulp van een transform . 

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

De tijdlijn voor de animatie grow-progress op het #progress element is ingesteld op een anonieme tijdlijn die is gemaakt met behulp van scroll() . Er worden geen argumenten gegeven aan scroll() dus het valt terug naar de standaardwaarden.

De standaardscroller die moet worden gevolgd, is de nearest , en de standaardas is block . Dit richt zich effectief op de root-scroller, aangezien die de dichtstbijzijnde scroller is van het #progress element, terwijl de blokrichting ervan wordt gevolgd.

Een benoemde scrollvoortgangstijdlijn maken in CSS

Een alternatieve manier om een ​​scrollvoortgangstijdlijn te definiëren is door een benoemde te gebruiken. Het is iets uitgebreider, maar het kan van pas komen als u zich niet richt op een bovenliggende scroller of de root-scroller, of wanneer de pagina meerdere tijdlijnen gebruikt of wanneer automatische zoekopdrachten niet werken. Op deze manier kunt u een scrollvoortgangstijdlijn identificeren aan de hand van de naam die u eraan geeft.

Om een ​​benoemde Scroll-voortgangstijdlijn voor een element te maken, stelt u de CSS-eigenschap scroll-timeline-name op de scroll-container in op een ID naar wens. De waarde moet beginnen met -- .

Om aan te passen welke as moet worden gevolgd, declareert u ook de eigenschap scroll-timeline-axis . Toegestane waarden zijn hetzelfde als het <axis> argument van scroll() .

Als u ten slotte de animatie aan de scrollvoortgangstijdlijn wilt koppelen, stelt u de eigenschap animation-timeline voor het element dat moet worden geanimeerd in op dezelfde waarde als de identifier die wordt gebruikt voor de scroll-timeline-name .

Codevoorbeeld:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

Indien gewenst kunt u scroll-timeline-name en scroll-timeline-axis combineren in de scroll-timeline steno. Bijvoorbeeld:

scroll-timeline: --my-scroller inline;

Deze demo bevat een stapindicator die boven elke beeldcarrousel wordt weergegeven. Wanneer een carrousel drie afbeeldingen bevat, begint de indicatorbalk bij een breedte van 33% om aan te geven dat u momenteel naar afbeelding één van de drie kijkt. Wanneer het laatste beeld in beeld is (bepaald doordat de scroller naar het einde is gescrolld) neemt de indicator de volledige breedte van de scroller in beslag. Een benoemde Scroll Progress Timeline wordt gebruikt om de animatie aan te sturen.

Demo: Horizontale carrouselstapindicator .

✨Probeer het zelf

De basismarkering voor een galerij is deze:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

Het .gallery__progress element is absoluut gepositioneerd binnen het .gallery wrapper element. De initiële grootte wordt bepaald door de aangepaste eigenschap --num-images .

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

De .gallery__scrollcontainer legt de aanwezige .gallery__entry elementen horizontaal neer en is het element dat scrollt. Door de scrollpositie te volgen, wordt de .gallery__progress geanimeerd. Dit wordt gedaan door te verwijzen naar de genoemde Scroll Progress Timeline --gallery__scrollcontainer .

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

Een scrollvoortgangstijdlijn maken met JavaScript

Als u een Scroll-tijdlijn in JavaScript wilt maken, maakt u een nieuw exemplaar van de klasse ScrollTimeline . Geef een eigendomszakje door met de source en axis die u wilt volgen.

  • source : Een verwijzing naar het element waarvan u de scroller wilt volgen. Gebruik document.documentElement om de root-scroller te targeten.
  • axis : bepaalt welke as moet worden gevolgd. Net als bij de CSS-variant zijn geaccepteerde waarden block , inline , x en y .
const tl = new ScrollTimeline({
  source: document.documentElement,
});

Om het aan een webanimatie te koppelen, geeft u het door als de timeline en laat u eventuele duration weg. 

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Demo: voortgangsindicator lezen, opnieuw bekeken

Om de leesvoortgangsindicator opnieuw te maken met JavaScript, terwijl u dezelfde opmaak gebruikt, gebruikt u de volgende JavaScript-code:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Het visuele resultaat is identiek in de CSS-versie: de gemaakte timeline volgt de root-scroller en schaalt de #progress omhoog op de x-as van 0% naar 100% terwijl u over de pagina scrolt.

✨Probeer het zelf

Praktisch aan de slag met View Progress Timeline

Een voortgangstijdlijn voor anonieme weergave maken in CSS

Gebruik de functie view() om een ​​weergavevoortgangstijdlijn te maken. De geaccepteerde argumenten zijn <axis> en <view-timeline-inset> .

  • De <axis> is dezelfde als die van de scrollvoortgangstijdlijn en definieert welke as moet worden gevolgd. De standaardwaarde is block .
  • Met <view-timeline-inset> kunt u een offset (positief of negatief) opgeven om de grenzen aan te passen wanneer een element al dan niet in beeld wordt geacht. De waarde moet een percentage of auto zijn, waarbij auto de standaardwaarde is.

Als u bijvoorbeeld een animatie wilt binden aan een element dat de scroller op de blokas kruist, gebruikt u view(block) . Vergelijkbaar met scroll() stelt u dit in als de waarde voor de eigenschap animation-timeline en vergeet niet de animation-duration in te stellen op auto .

Met behulp van de volgende code zal elke img infaden wanneer deze de viewport passeert terwijl u scrolt.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: bekijk tijdlijnbereiken

Standaard wordt een animatie die is gekoppeld aan de weergavetijdlijn, gekoppeld aan het gehele tijdlijnbereik. Dit begint vanaf het moment dat de proefpersoon op het punt staat de scrollport te betreden en eindigt wanneer de proefpersoon de scrollport volledig heeft verlaten.

Het is ook mogelijk om het aan een specifiek deel van de weergavetijdlijn te koppelen door het bereik op te geven waaraan het moet worden gekoppeld. Dit kan bijvoorbeeld alleen zijn als het onderwerp de scroller binnenkomt. In de volgende visualisatie begint de voortgang op te tellen vanaf 0% wanneer het onderwerp de scrollcontainer binnengaat, maar bereikt al 100% vanaf het moment dat deze de scrollcontainer volledig kruist.

Een weergavetijdlijn die is ingesteld om het invoerbereik van het onderwerp bij te houden. De animatie loopt alleen terwijl het onderwerp de scrollport binnengaat.

De mogelijke weergavetijdlijnbereiken waarop u zich kunt richten, zijn de volgende:

  • cover : vertegenwoordigt het volledige bereik van de voortgangstijdlijn van de weergave.
  • entry : vertegenwoordigt het bereik waarin het hoofdvak het zichtbaarheidsbereik voor de voortgang van de weergave betreedt.
  • exit : vertegenwoordigt het bereik waarin het hoofdvak het zichtbaarheidsbereik van de weergavevoortgang verlaat.
  • entry-crossing : vertegenwoordigt het bereik waarin het hoofdvak de eindrand overschrijdt.
  • exit-crossing : vertegenwoordigt het bereik waarin het hoofdvak de rand van de startgrens overschrijdt.
  • contain : vertegenwoordigt het bereik waarin het hoofdvak volledig wordt ingesloten door het zichtbaarheidsbereik van de voortgang van de weergave binnen de scrollport. Dit hangt ervan af of het onderwerp groter of korter is dan de scroller.

Om een ​​bereik te definiëren, moet u een bereikbegin en een bereikeind instellen. Elk bestaat uit bereiknaam (zie lijst hierboven) en een bereikoffset om de positie binnen die bereiknaam te bepalen. De bereik-offset is doorgaans een percentage dat varieert van 0% tot 100% , maar u kunt ook een vaste lengte opgeven, zoals 20em .

Als u bijvoorbeeld een animatie wilt laten lopen vanaf het moment dat een onderwerp binnenkomt, kiest u entry 0% als beginpunt. Om het klaar te hebben tegen de tijd dat het onderwerp binnenkomt, kiest u entry 100% als waarde voor het einde van het bereik.

In CSS stel je dit in met de eigenschap animation-range . Voorbeeld:

animation-range: entry 0% entry 100%;

Gebruik in JavaScript de eigenschappen rangeStart en rangeEnd .

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Gebruik de onderstaande tool om te zien wat elke bereiknaam vertegenwoordigt en hoe de percentages de begin- en eindposities beïnvloeden. Probeer het begin van het bereik in te stellen op entry 0% en het einde van het bereik cover 50% en sleep vervolgens de schuifbalk om het animatieresultaat te zien.

De View Timeline Ranges Visualizer, beschikbaar op https://goo.gle/view-timeline-range-tool

Bekijk een opname

Zoals je misschien opmerkt tijdens het spelen met deze tools voor het bekijken van tijdlijnbereiken, kunnen sommige bereiken worden getarget door twee verschillende combinaties van bereiknaam + bereik-offset. Zo richten entry 0% , entry-crossing 0% en cover 0% zich allemaal op hetzelfde gebied.

Wanneer het begin- en eindbereik dezelfde bereiknaam targeten en het hele bereik bestrijken (van 0% tot 100%), kunt u de waarde inkorten tot eenvoudigweg de bereiknaam. Bijvoorbeeld animation-range: entry 0% entry 100%; kan worden herschreven naar het veel kortere animation-range: entry .

Demo: afbeelding onthullen

Deze demo vervaagt in de afbeeldingen zodra ze de scrollport binnenkomen. Dit gebeurt met behulp van een anonieme weergavetijdlijn. Het animatiebereik is aangepast zodat elke afbeelding volledig ondoorzichtig is wanneer deze zich halverwege de scroller bevindt.

Demo: afbeelding onthullen

✨Probeer het zelf

Het uitdijende effect wordt bereikt door gebruik te maken van een clippad dat geanimeerd is. De CSS die voor dit effect wordt gebruikt, is deze: 

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Een benoemde View Progress-tijdlijn maken in CSS

Vergelijkbaar met de manier waarop Scroll-tijdlijnen benoemde versies hebben, kunt u ook benoemde View-tijdlijnen maken. In plaats van de scroll-timeline-* eigenschappen gebruik je varianten die het view-timeline- voorvoegsel dragen, namelijk view-timeline-name en view-timeline-axis .

Hetzelfde type waarden zijn van toepassing, en dezelfde regels voor het opzoeken van een benoemde tijdlijn zijn van toepassing.

Demo: beeld onthullen, opnieuw bekeken

Het herwerken van de image reveal demo van eerder, de herziene code ziet er als volgt uit:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

Met behulp van view-timeline-name: revealing-image wordt het element gevolgd in de dichtstbijzijnde scroller. Dezelfde waarde wordt vervolgens gebruikt als de waarde voor de eigenschap animation-timeline . De visuele output is precies hetzelfde als voorheen.

✨Probeer het zelf

Een weergavevoortgangstijdlijn maken in JavaScript

Als u een View-tijdlijn in JavaScript wilt maken, maakt u een nieuw exemplaar van de ViewTimeline klasse. Geef een eigendomszakje door met het subject dat u wilt volgen, axis en inset .

  • subject : Een verwijzing naar het element dat u wilt volgen binnen zijn eigen scroller.
  • axis : De as die moet worden gevolgd. Net als bij de CSS-variant zijn geaccepteerde waarden block , inline , x en y .
  • inset : Een inset (positief) of outset (negatief) aanpassing van de scrollport bij het bepalen of de box in zicht is.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Om het aan een webanimatie te koppelen, geeft u het door als de timeline en laat u eventuele duration weg. U kunt desgewenst bereikinformatie doorgeven met behulp van de eigenschappen rangeStart en rangeEnd .

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨Probeer het zelf

Nog meer dingen om uit te proberen

Koppeling aan meerdere weergavetijdlijnbereiken met één set keyframes

Laten we eens kijken naar deze demo met contactenlijst waarin de lijstitems geanimeerd zijn. Wanneer een lijstitem de scrollport van onderen binnenkomt, schuift+fade het naar binnen, en als het de scrollport bovenaan verlaat, schuift+fade het uit.

Demo: Contactlijst

✨Probeer het zelf

Voor deze demo wordt elk element versierd met één weergavetijdlijn die het element volgt terwijl het de scrollport passeert, maar er zijn nog twee scrollgestuurde animaties aan gekoppeld. De animate-in -animatie is gekoppeld aan het entry van de tijdlijn, en de animate-out -animatie aan het exit van de tijdlijn.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

In plaats van twee verschillende animaties uit te voeren die aan twee verschillende bereiken zijn gekoppeld, is het ook mogelijk om één set keyframes te maken die al de bereikinformatie bevat.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Omdat de keyframes de bereikinformatie bevatten, hoeft u het animation-range niet op te geven. Het resultaat is precies hetzelfde als voorheen.

✨Probeer het zelf

Koppelen aan een niet-voorouder Scroll-tijdlijn

Het opzoekmechanisme voor benoemde Scroll-tijdlijnen en benoemde View-tijdlijnen is beperkt tot uitsluitend scroll-voorouders. Heel vaak is het element dat moet worden geanimeerd echter geen onderdeel van de scroller die moet worden gevolgd.

Om dit te laten werken, komt de eigenschap timeline-scope in beeld. U gebruikt deze eigenschap om een ​​tijdlijn met die naam te declareren zonder deze daadwerkelijk te maken. Dit geeft de tijdlijn met die naam een ​​bredere reikwijdte. In de praktijk gebruikt u de eigenschap timeline-scope voor een gedeeld bovenliggend element, zodat de tijdlijn van een onderliggende scroller hieraan kan worden gekoppeld.

Bijvoorbeeld:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

In dit fragment:

  • Het .parent element declareert een tijdlijn met de naam --tl . Elk kind ervan kan het vinden en gebruiken als waarde voor de eigenschap animation-timeline .
  • Het .scroller element definieert feitelijk een Scroll-tijdlijn met de naam --tl . Standaard zou het alleen zichtbaar zijn voor de kinderen, maar omdat .parent het heeft ingesteld als de scroll-timeline-root , wordt het eraan gekoppeld.
  • Het .subject element gebruikt de --tl tijdlijn. Het loopt naar zijn voorouderboom en vindt --tl op de .parent . Met de --tl op de .parent die naar de --tl van .scroller wijst, zal het .subject in wezen de scrollvoortgangstijdlijn van de .scroller volgen.

Anders gezegd, je kunt timeline-root gebruiken om een ​​tijdlijn naar een voorouder te verplaatsen (ook wel hoisting genoemd), zodat alle kinderen van de voorouder er toegang toe hebben.

De eigenschap timeline-scope kan zowel bij het scrollen als bij het bekijken van tijdlijnen worden gebruikt.

Meer demo's en bronnen

Alle demo's die in dit artikel worden behandeld op de scroll-driven-animations.style mini-site . De website bevat nog veel meer demo's om te laten zien wat er allemaal mogelijk is met scrollgestuurde animaties.

Een van de extra demo's is deze lijst met albumhoezen. Elke hoes draait in 3D terwijl deze in de middelste schijnwerper staat.

Demo: Coverflow

✨Probeer het zelf

Of deze demo met stapelkaarten die gebruik maakt van position: sticky . Naarmate de kaarten zich opstapelen, worden de reeds vastgeplakte kaarten kleiner, waardoor een mooi diepte-effect ontstaat. Uiteindelijk verdwijnt de hele stapel als groep uit het zicht.

Demo: Kaarten stapelen .

✨Probeer het zelf

Op scroll-driven-animations.style vindt u ook een verzameling hulpmiddelen, zoals de weergave Tijdlijnbereikvoortgangsvisualisatie die eerder in dit bericht was opgenomen.

Scrollgestuurde animaties komen ook aan bod in Wat is er nieuw in webanimaties op Google I/O '23.