Deze laatste weekly nerd was een speciaal pre CSS day event voor CSS day op 6 en 7 juni, waar ook al een paar sprekers en bezoekers van CSS day aanwezig waren. Op dit event spraken Bramus van Damme en Miriam Suzanne.
Bramus van Damme is een webdeveloper uit België en werkt voor Google als Chrome developer relations engineer. Hij vertelde ons over cross-document view transitions, een nieuwe web feature, waarmee overgangen tussen pagina's gemaakt kunnen worden.
Cross-document view transitions
Cross-document view transitions is een nieuwe feature waarmee overgangen tussen pagina's gemaakt kunnen worden. Dit is handig voor de gebruikers ervaring, omdat gebruikers dan een idee hebben van wat er gebeurt tussen de pagina's, in plaats van dat het van de ene naar de andere pagina flitst. Bramus liet een handig voorbeeld zien van hoe dit gebruikers laat zien hoe bijvoorbeeld elementen verplaatsen op de pagina.
Bron: https://live-transitions.pages.dev/
Ik denk dat dit niet alleen goed laat zien hoe view transitions de gebruikers ervaring kunnen verbeteren, maar ook hoe we nu interessantere pagina's kunnen bouwen. Waar ik voorheen elementen op dezelfde plek gehouden zou hebben, zou dat de gebruiker ze niet kwijt zou raken, kan ik nu elementen op verschillende pagina's op andere plekken zetten. Een animatie kan goed aangeven dat het element verplaatst is en waarheen. Dit is dan nog maar één van de waarschijnlijke mogelijkheden, waar ik nu toevallig mee kwam.
Hoe werkt het?
Het gegeven voorbeeld is wel met same-document view transitions gemaakt, omdat cross-document nog niet bestaat. Tijdens de rest van zijn uitleg gebruikte Bramus daarom ook same-document view transitions en legt hij aan het einde uit wat het verschil is.
Om een overgang te starten, gebruiken we JavaScript:
document.startViewTransition(() => {
//whatever changes
});Tijdens de overgang maakt de browser een aantal stappen:
- De elementen voor de overgang vastleggen
- Navigeren naar de andere pagina zonder die weer te geven
- De elementen na de overgang vastleggen
- Een overgang maken tussen de twee momenten
- De nieuwe pagina weergeven
- De opgeslagen momenten verwijderen
In CSS kan je vervolgens verschillende element een naam geven met view-transition-name om losse elementen te animeren. De root heeft vanuit de user-agent styles al de naam root. Voor elk element wat een overgang heeft, worden psuedo element aangemaakt.
:root ::view-transition → overlay on top
::view-transition-group
::view-transition-image-pair(root) → blend mode isolation
::view-transition-new(root)
::view-transition-old(root)
Voor elke element wordt er een nieuwe groep met afbeeldingen aangemaakt. De overgangen zijn normale CSS animaties, dus op al deze element kan je de normale properties gebruiken. Dingen als kleur werken niet, omdat de overgang simpel bestaat uit pixels op het scherm.
Stappen plan
Als laaste gaf Bramus ons nog een handig stappenplan mee om een overgang te maken:
-
Herken de elementen die je wilt animeren en geeft ze een naam
- Kijk naar element die op beide pagina's hetzelfde zijn
- Het is oke als dingen net een beetje anders zijn
- Geef alle elementen een naam. De elementen hoeven niet hetzelfde te zijn, ze hoeven alleen maar dezelfde naam te hebben
- Start de animatie in JavaScript
- Geef je eigen stijl aan de overgang met CSS
Wat is anders aan cross-document
Met cross-document hebben we natuurlijk te maken met verschillende pagina's en dus dat scripts opnieuw worden geladen. Bramus legde uit hoe dit is opgelost. Als eerste moeten beide pagina's aangeven dat ze aan de overgang mee doen met @view-transitions{ navigation: auto; } in de CSS. Verder zijn er nieuwe JavaScript events, omdat bestaande events of te laat of te vroeg zijn. Voor de oude pagina is dat pageswap en voor de nieuwe pagina pagereveal. Als laatste zei Bramus nog dat je wel op moet passen, omdat het render blocking is.
Als elementen dus lang duren om te laden, moet de overgang daar op wachten, hoewel je normaal de andere pagina natuurlijk al kan zien. Zelf lijkt dit me niet zo'n groot probleem, zolang je de gebruiker maar laat zien wat er gebeurt. Dat is uiteindelijk toch ook waar view transitions voor zijn.