Animeer elementen tijdens het scrollen met scrollgestuurde animaties

Leer hoe je met Scroll Timelines en View Timelines scroll-gestuurde animaties op een declaratieve manier kunt maken.

Bramus

Gepubliceerd: 5 mei 2023

Scrollgestuurde animaties

Browser Support

  • Chrome: 115.
  • Rand: 115.
  • Firefox: achter een vlag.
  • Safari: 26.

Source

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.

Een leesindicator bovenaan een document, die wordt aangestuurd door te scrollen.

Een vergelijkbare vorm van scroll-gestuurde animatie is een animatie die gekoppeld is aan de positie van een element binnen de scrollcontainer. Hiermee kunnen elementen bijvoorbeeld geleidelijk in beeld komen (fade-in).

De afbeeldingen op deze pagina verschijnen geleidelijk in beeld.

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

  • Moderne browsers voeren het scrollen uit in een apart proces en leveren scrollgebeurtenissen daarom asynchroon.
  • De animaties in de hoofdthread kunnen haperingen vertonen .

Hierdoor is het onmogelijk of zeer moeilijk om vloeiende, scrollgestuurde animaties te creëren die synchroon lopen met het scrollen.

Vanaf Chrome versie 115 is er een nieuwe set API's en concepten waarmee je declaratieve, scrollgestuurde animaties kunt inschakelen: Scroll Timelines en View Timelines.

Deze nieuwe concepten integreren met de bestaande Web Animations API (WAAPI) en CSS Animations API , waardoor ze de voordelen van deze API's kunnen overnemen. Dit omvat de mogelijkheid om scroll-gestuurde animaties buiten de hoofdthread uit te voeren. Ja, u leest het goed: u kunt nu vloeiende animaties, aangestuurd door scrollen, buiten de hoofdthread laten draaien met slechts een paar regels extra code. Wat is daar nou niet leuk aan?!

Animaties op het web: een korte samenvatting

Webanimaties met CSS

Om een ​​animatie in CSS te maken, definieer je een set keyframes met de @keyframes at-regel. Koppel deze aan een element met de eigenschap animation-name en stel tegelijkertijd een animation-duration in om te bepalen hoe lang de animatie moet duren. Er zijn meer uitgebreide eigenschappen beschikbaar animation-* zoals animation-easing-function en animation-fill-mode die allemaal in de verkorte animation kunnen worden gecombineerd.

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

Webanimaties met JavaScript

In JavaScript kan de Web Animations API worden gebruikt om precies hetzelfde te bereiken. Je 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',
   }
);

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

Tijdlijnen voor animatie

Standaard wordt een animatie die aan een element is gekoppeld, uitgevoerd op de tijdlijn van het document . De begintijd begint bij 0 wanneer de pagina wordt geladen en loopt door naarmate de kloktijd vordert. Dit is de standaard animatietijdlijn en was tot nu toe de enige animatietijdlijn waartoe je toegang had.

De specificatie voor scrollgestuurde animaties 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 specifiek element binnen de scrollcontainer.

Scroll voortgangstijdlijn

Een scrollvoortgangstijdlijn is een animatietijdlijn die is gekoppeld aan de voortgang van een scrollcontainer – ook wel scrollport of scroller genoemd – langs een bepaalde as. Het zet een positie binnen een scrollbereik om in een voortgangspercentage.

De beginpositie van de scrollbalk staat voor 0% voortgang en de eindpositie voor 100% voortgang. In de volgende visualisatie kunt u zien dat de voortgang oploopt van 0% tot 100% terwijl u de scrollbalk van boven naar beneden beweegt.

Visualisatie van een scrollvoortgangstijdlijn. Terwijl u naar beneden scrollt, loopt de voortgangswaarde op van 0% tot 100%.

✨ Probeer het zelf eens

Een scroll-voortgangstijdlijn wordt vaak afgekort tot "scroll-tijdlijn".

Bekijk de voortgangstijdlijn

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

Dit is enigszins vergelijkbaar met de werking IntersectionObserver , die bijhoudt hoe zichtbaar een element is in de scrollbalk. Als het element niet zichtbaar is in de scrollbalk, is er geen sprake van een overlapping. Als het wel zichtbaar is binnen de scrollbalk – zelfs maar een klein beetje – is er wel sprake van een overlapping.

Een voortgangstijdlijn van een weergave begint op het moment dat een onderwerp de scrollbalk kruist en eindigt wanneer het onderwerp de scrollbalk niet meer kruist. In de volgende visualisatie kunt u zien dat de voortgang begint te tellen vanaf 0% wanneer het onderwerp de scrollbalk binnenkomt en 100% bereikt op het moment dat het onderwerp de scrollbalk verlaat.

Visualisatie van een voortgangsweergave op een tijdlijn. De voortgang loopt op van 0% tot 100% naarmate het onderwerp (groene rechthoek) de schuifregelaar passeert.

✨ Probeer het zelf eens

Een weergave van de voortgang in een tijdlijn wordt vaak afgekort tot 'weergavetijdlijn'. Het is mogelijk om specifieke onderdelen van een weergavetijdlijn te selecteren 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 ​​scroll-tijdlijn in CSS te maken, is door de functie scroll() te gebruiken. Hiermee creëer je een anonieme scroll-tijdlijn die je kunt instellen als 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.

De volgende waarden worden geaccepteerd voor het argument <scroller> :

  • nearest : Gebruikt de dichtstbijzijnde scrollcontainer (standaard) .
  • root : Gebruikt het documentvenster als scrollcontainer.
  • self : Gebruikt het element zelf als scrollcontainer.

De volgende waarden worden geaccepteerd voor het argument <axis> :

  • block : Gebruikt de voortgangsmeting langs de blok-as van de scrollcontainer (standaard) .
  • inline : Gebruikt de voortgangsmeting langs de inline-as van de scrollcontainer.
  • y : Gebruikt de voortgangsmaat langs de y-as van de scrollcontainer.
  • x : Gebruikt de voortgangsmaat langs de x-as van de scrollcontainer.

Om bijvoorbeeld een animatie aan de hoofdscroller op de blokas te koppelen, moeten de waarden root en block aan scroll() worden doorgegeven. Samengevoegd is de waarde scroll(root block) .

Demo: Voortgangsindicator voor lezen

Deze demo heeft een voortgangsindicator die bovenaan het scherm is vastgezet. Naarmate u naar beneden scrollt, groeit de voortgangsbalk totdat deze de volledige breedte van het scherm beslaat wanneer u het einde van het document bereikt. Een anonieme scrollvoortgangstijdlijn wordt gebruikt om de animatie aan te sturen.

Demo: Voortgangsindicator voor het lezen .

✨ Probeer het zelf eens

De voortgangsindicator voor het lezen is bovenaan de pagina geplaatst met behulp van `position fixed`. Om samengestelde animaties te gebruiken, wordt niet de width geanimeerd, maar wordt het element langs 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 aan scroll() meegegeven, dus deze zal terugvallen op de standaardwaarden.

De standaard scroller die wordt gevolgd, is de nearest , en de standaardas is block . Dit richt zich effectief op de hoofdscroller, omdat dat de dichtstbijzijnde scroller is ten opzichte 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 er een naam aan te geven. Dit is iets uitgebreider, maar kan handig zijn wanneer u zich niet richt op een bovenliggende scrollbalk of de hoofdscrollbalk, of wanneer de pagina meerdere tijdlijnen gebruikt of wanneer automatisch zoeken niet werkt. Op deze manier kunt u een scrollvoortgangstijdlijn identificeren aan de hand van de naam die u eraan geeft.

Om een ​​benoemde scrollvoortgangstijdlijn aan een element toe te voegen, stelt u de CSS-eigenschap ` scroll-timeline-name van de scrollcontainer in op een identificatiecode naar keuze. De waarde moet beginnen met -- .

Om aan te passen welke as moet worden gevolgd, moet u ook de eigenschap scroll-timeline-axis declareren. De toegestane waarden zijn dezelfde als die van het argument <axis> ` van scroll() .

Om de animatie te koppelen aan de voortgangslijn van het scrollen, stelt u tot slot de eigenschap animation-timeline van het element dat geanimeerd moet worden in op dezelfde waarde als de identifier die gebruikt wordt voor ` 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 afkorting scroll-timeline . Bijvoorbeeld:

scroll-timeline: --my-scroller inline;

Deze demo toont een voortgangsindicator boven elke afbeeldingscarrousel. Wanneer een carrousel drie afbeeldingen bevat, begint de indicatorbalk op 33% van de breedte om aan te geven dat u momenteel de eerste van de drie afbeeldingen bekijkt. Wanneer de laatste afbeelding in beeld is – bepaald doordat de scrollbalk naar het einde is gescrold – neemt de indicator de volledige breedte van de scrollbalk in beslag. Een benoemde Scroll Progress Timeline wordt gebruikt om de animatie aan te sturen.

Demo: Horizontale carrouselstapindicator .

✨ Probeer het zelf eens

De basisopmaak voor een galerij is als volgt:

<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 element .gallery__progress is absoluut gepositioneerd binnen het wrapper-element .gallery . 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 rangschikt de daarin opgenomen .gallery__entry elementen horizontaal en is het element dat scrollt. Door de scrollpositie te volgen, wordt de .gallery__progress geanimeerd. Dit gebeurt door te verwijzen naar de benoemde 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

Om een ​​scrollende tijdlijn in JavaScript te maken, creëer je een nieuw exemplaar van de klasse ScrollTimeline . Geef een property bag mee met de source en axis die je wilt volgen.

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

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

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

Demo: De leesvoortgangsindicator opnieuw bekeken

Om de leesvoortgangsindicator met JavaScript na te maken, met behoud van dezelfde opmaak, 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 hoofdscroll en schaalt de #progress op de x-as van 0% naar 100% naarmate je de pagina scrollt.

✨ Probeer het zelf eens

Praktisch aan de slag met de voortgangsweergave in de tijdlijn.

Een anonieme weergave-voortgangstijdlijn maken in CSS

Om een ​​voortgangstijdlijn te maken, gebruikt u de functie view() . De geaccepteerde argumenten zijn <axis> en <view-timeline-inset> .

  • De <axis> is hetzelfde als bij de scrollvoortgangstijdlijn en definieert welke as moet worden bijgehouden. 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 wel of niet in beeld is. De waarde moet een percentage of auto zijn, waarbij auto de standaardwaarde is.

Om bijvoorbeeld een animatie te koppelen aan een element dat de scrollbalk op de blokas kruist, gebruikt u view(block) . Net als bij scroll() stelt u dit in als de waarde voor de animation-timeline eigenschap en vergeet niet om de animation-duration op auto in te stellen.

Met de volgende code zal elke img geleidelijk in beeld verschijnen zodra deze het zichtbare gedeelte van het scherm passeert tijdens het scrollen. 

@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, aan het volledige tijdlijnbereik gekoppeld. Deze begint op het moment dat het onderwerp op het punt staat het scrollgebied binnen te komen en eindigt wanneer het onderwerp het scrollgebied volledig heeft verlaten.

Het is ook mogelijk om de voortgangsindicator te koppelen aan een specifiek deel van de tijdlijn door het bereik te specificeren waaraan deze moet worden gekoppeld. Dit kan bijvoorbeeld alleen wanneer het onderwerp de scrollbalk binnenkomt. In de volgende visualisatie begint de voortgangsteller te tellen vanaf 0% wanneer het onderwerp de scrollbalk binnenkomt, maar bereikt al 100% vanaf het moment dat het onderwerp de scrollbalk volledig doorkruist.

Een weergavetijdlijn die is ingesteld om het bereik van het onderwerp bij te houden. De animatie wordt alleen afgespeeld zolang het onderwerp het scrollvenster binnenkomt.

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

  • cover : Geeft het volledige tijdsverloop van de weergave weer.
  • entry : Geeft het bereik aan waarin het hoofdvak het zichtbaarheidsbereik van de weergavevoortgang betreedt.
  • exit : Geeft het bereik aan waarin het hoofdvak het zichtbaarheidsbereik van de weergavevoortgang verlaat.
  • entry-crossing : Geeft het bereik aan waarbinnen het hoofdvak de eindrand overschrijdt.
  • exit-crossing : Geeft het bereik aan waarbinnen het hoofdvak de beginrand overschrijdt.
  • contain ': Geeft het bereik aan waarbinnen het hoofdvak volledig wordt omsloten door, of volledig bedekt, het zichtbaarheidsbereik van de weergavevoortgang binnen de scrollport. Dit is afhankelijk van of het onderwerp hoger of lager is dan de scrollbalk.

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

Als je bijvoorbeeld een animatie wilt laten starten vanaf het moment dat een persoon binnenkomt, kies dan entry 0% als bereikstart. Om de animatie te laten eindigen op het moment dat de persoon binnenkomt, kies je entry 100% als waarde voor bereikeind.

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

animation-range: entry 0% entry 100%;

In JavaScript gebruik je 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 voorstelt 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 op cover 50% , en sleep vervolgens de schuifbalk om het animatieresultaat te bekijken.

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

Bekijk een opname

Zoals je misschien merkt tijdens het experimenteren met de tools voor het weergeven van tijdlijnbereiken, kunnen sommige bereiken worden geselecteerd met twee verschillende combinaties van bereiknaam en bereikverschuiving. Zo selecteren bijvoorbeeld ' entry 0% , entry-crossing 0% en cover 0% allemaal hetzelfde gebied.

Wanneer het begin- en eindpunt van het bereik dezelfde bereiknaam betreffen en het hele bereik bestrijken – van 0% tot 100% – kunt u de waarde verkorten tot alleen de bereiknaam. Bijvoorbeeld, animation-range: entry 0% entry 100%; kan worden herschreven naar het veel kortere animation-range: entry .`

Demo: Beeldweergave

Deze demo laat de afbeeldingen geleidelijk verschijnen zodra ze het scrollgebied binnenkomen. Dit wordt gedaan met behulp van een anonieme weergavetijdlijn. Het animatiebereik is aangepast zodat elke afbeelding volledig transparant is wanneer deze halverwege de scrollbalk is.

Demo: Beeldweergave

✨ Probeer het zelf eens

Het uitbreidende effect wordt bereikt door een clip-path te animeren. De CSS die hiervoor gebruikt wordt, is als volgt: 

@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 weergavevoortgangstijdlijn maken in CSS

Net zoals scrolltijdlijnen benoemde versies hebben, kunt u ook benoemde weergavetijdlijnen maken. In plaats van de eigenschappen scroll-timeline-* gebruikt u varianten met het voorvoegsel view-timeline- , namelijk view-timeline-name en view-timeline-axis .

Dezelfde soorten waarden zijn van toepassing, en dezelfde regels gelden voor het opzoeken van een benoemde tijdlijn.

Demo: Beeldonthulling, opnieuw bekeken

De herziene code voor de demo met het onthullen van afbeeldingen van eerder 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%;
}

view-timeline-name: revealing-image te gebruiken, wordt het element binnen de dichtstbijzijnde scrollbalk gevolgd. Dezelfde waarde wordt vervolgens gebruikt voor de animation-timeline eigenschap. Het visuele resultaat is exact hetzelfde als voorheen.

✨ Probeer het zelf eens

Een voortgangstijdlijn voor een weergave maken in JavaScript

Om een ​​ViewTimeline in JavaScript te maken, creëer je een nieuw exemplaar van de ViewTimeline klasse. Geef een property bag mee met het subject dat je wilt volgen, axis en inset .

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

Om het aan een webanimatie te koppelen, geef je het door als de timeline en laat je de eventuele duration weg. Optioneel kun je 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 eens

Nog meer dingen om uit te proberen

Koppelen aan meerdere tijdlijnbereiken met één set keyframes

Laten we eens kijken naar deze demo van een contactlijst waarin de lijstitems geanimeerd zijn. Wanneer een lijstitem van onderaf in het scrollgebied verschijnt, schuift het naar binnen en vervaagt het, en wanneer het aan de bovenkant uit het scrollgebied verdwijnt, schuift het naar buiten en vervaagt het.

Demo: Contactlijst

✨ Probeer het zelf eens

Voor deze demo wordt elk element voorzien van een View Timeline die het element volgt wanneer het de scrollzone passeert. Aan deze tijdlijn zijn twee scroll-gestuurde animaties 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 te gebruiken die aan twee verschillende bereiken zijn gekoppeld, is het ook mogelijk om één set keyframes te maken die de bereikinformatie al 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 al bevatten, hoeft u het animation-range niet te specificeren. Het resultaat is precies hetzelfde als voorheen.

✨ Probeer het zelf eens

Koppelen aan een niet-voorouderlijke Scroll-tijdlijn

Het opzoekmechanisme voor benoemde scrolltijdlijnen en benoemde weergavetijdlijnen is beperkt tot scrollvoorouders. Heel vaak is het element dat geanimeerd moet worden echter geen kindelement van de scroller die gevolgd moet worden.

Om dit te laten werken, komt de eigenschap timeline-scope van pas. Je gebruikt deze eigenschap om een ​​tijdlijn met die naam te declareren zonder deze daadwerkelijk aan te maken. Dit geeft de tijdlijn met die naam een ​​breder bereik. In de praktijk gebruik je de eigenschap timeline-scope op een gedeeld ouderelement, zodat de tijdlijn van een onderliggende scroller zich daaraan kan koppelen.

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 kindelement kan deze vinden en gebruiken als waarde voor de eigenschap animation-timeline .
  • Het .scroller element definieert feitelijk een scrolltijdlijn met de naam --tl . Standaard zou deze alleen zichtbaar zijn voor de onderliggende elementen, maar omdat .parent het heeft ingesteld als de scroll-timeline-root , wordt het eraan gekoppeld.
  • Het .subject element gebruikt de --tl tijdlijn. Het doorloopt de voorouderstructuur en vindt --tl op het .parent . Doordat de --tl op het .parent verwijst naar de --tl van .scroller , zal het .subject in feite de scrollvoortgangstijdlijn van .scroller volgen.

Anders gezegd, je kunt timeline-root gebruiken om een ​​tijdlijn naar een bovenliggende laag te verplaatsen (ook wel 'hoisting' genoemd), zodat alle onderliggende lagen van die laag er toegang toe hebben.

De eigenschap timeline-scope kan zowel met Scroll Timelines als met View Timelines worden gebruikt.

Meer demo's en bronnen

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

Een van de extra demo's is deze lijst met albumhoezen. Elke hoes draait in 3D rond terwijl hij in het midden van het scherm verschijnt.

Demo: Cover Flow

✨ Probeer het zelf eens

Of deze demonstratie met stapelkaarten die gebruikmaakt van de position: sticky . Naarmate de kaarten zich opstapelen, schalen de reeds vastzittende kaarten naar beneden, waardoor een mooi diepte-effect ontstaat. Uiteindelijk schuift de hele stapel als één geheel uit beeld.

Demonstratie: Kaarten stapelen .

✨ Probeer het zelf eens

Op scroll-driven-animations.style vind je ook een verzameling tools, zoals de visualisatie 'View Timeline Range Progress' die eerder in dit bericht werd besproken.

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