Leer hoe u met Scroll-tijdlijnen en View-tijdlijnen kunt werken om op een declaratieve manier scroll-gestuurde animaties te maken.
Scrollgestuurde animaties
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 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 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 oploopt van 0% tot 100% terwijl u van boven naar beneden door de scroller bladert.
✨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.
✨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.
✨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 identificatie 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;
Demo: Horizontale carrouselstapindicator
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.
✨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. Gebruikdocument.documentElement
om de root-scroller te targeten. -
axis
: bepaalt welke as moet worden gevolgd. Net als bij de CSS-variant zijn geaccepteerde waardenblock
,inline
,x
eny
.
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 isblock
. - 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 ofauto
zijn, waarbijauto
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.
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.
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 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.
✨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 waardenblock
,inline
,x
eny
. -
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.
✨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 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 een waarde voor de eigenschapanimation-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 descroll-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.
✨Probeer het zelf
Of deze demo met stapelkaarten die gebruik maakt 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.
✨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.