Soepele paginatransities met CSS View Transitions

Webdevelopment is continu in beweging en is super dynamisch, al helemaal voor het front-end vakgebied. Voor front-end developers verandert er veel. Zaken zoals accessibility (a11y) en SEO worden steeds belangrijker, maar ook de technieken waarmee we werken ontwikkelen zich snel. Dit wordt misschien nergens zo duidelijk geïllustreerd als binnen CSS. CSS ontwikkelt zich razend snel en wordt steeds krachtiger. Het gaat zo snel dat het soms lastig kan zijn om bij te blijven met de nieuwe functionaliteiten.

Als developer vind ik het zowel leuk als belangrijk om toch zoveel mogelijk up-to-date te blijven van nieuwe ontwikkelingen. En een van de meest interessante nieuwe functionaliteiten van CSS vind ik view-transitions. Met deze relatief nieuwe API kunnen paginatransities worden gemaakt, iets wat voorheen niet of moeilijk mogelijk was. Daarom is deze ontwikkeling niet alleen voor front-end developers interessant, maar ook voor UI/UX designers.

Wat zijn view transitions?

Een view transition is een term die verwijst naar een geanimeerde transitie van één scherm/pagina naar een andere. Normaal gesproken, wanneer je van de ene pagina naar de andere navigeert, zie je het beeld van de ene naar de andere pagina verspringen. Met view transitions kan je deze overgang een stuk soepeler en mooier laten verlopen. Het is dus een geanimeerde transitie van de ‘oude’ pagina naar de ‘nieuwe’ pagina.

View transitions waren in het verleden heel beperkt mogelijk. En wanneer ze mogelijk waren, vereisten ze JavaScript en een hoop ‘trucjes’ achter de schermen om het goed te laten werken. Vandaag de dag bestaat deze functionaliteit dus standaard in de browser. Dit scheelt developers een hoop werk. Niet alleen wordt ons een hoop werk uit handen genomen, ook werkt deze functionaliteit nu consistenter. Daar komt bij dat CSS een stuk minder van de browser eist dan JavaScript.

Wat kan je ermee?

View transitions zijn waardevolle toevoegingen aan het web. Ze kunnen een webapp een stuk soepeler laten aanvoelen en creëren een visuele continuïteit die een website ten goede kan komen. Een view transition kan ook visuele hints geven over wat er gebeurt op het scherm, en dus meer duidelijkheid scheppen. Er zijn dus veel use-cases te bedenken voor deze nieuwe techniek.

Paginatransities

Dit is de meest voor de hand liggende. Een view transition kan een website meer als één geheel laten aanvoelen. Het kan bijvoorbeeld een element van een website worden dat overal terugkomt en daarom heel herkenbaar wordt voor de bezoeker. Denk bijvoorbeeld aan een wit scherm met het logo van jouw bedrijf. Je klikt op een link, en in plaats van dat je tijdelijk niets ziet, wordt een wit scherm met jouw logo zichtbaar. Dat witte scherm overbrugt de transitie van de oude naar de nieuwe pagina.

Dat is niet waar het ophoudt. View transitions kunnen gedeelde elementen tussen pagina’s ook animeren. Stel je voor, je ‘oude’ en ‘nieuwe’ pagina maken allebei gebruik van dezelfde afbeelding. Zonder een view transition zie je de afbeelding niet van de oude naar de nieuwe website verplaatsen. Er bestaat een duidelijke scheiding tussen de oude en nieuwe pagina. Met een view transition wordt deze scheiding een stuk minder duidelijk. Je zou, bijvoorbeeld, de gedeelde afbeelding kunnen laten animeren, van zijn positie op de oude pagina, naar de positie op de nieuwe pagina. In plaats van dat de afbeelding verspringt, wordt de afbeelding geanimeerd van pagina naar pagina.

Layout wijzigingen

Omdat je met view transitions individuele HTML-elementen kan benaderen, kan je ze van een oude staat naar een nieuwe staat laten animeren. Denk bijvoorbeeld aan een collectie producten die je als lijst óf als raster kan bekijken. Wanneer je van de een naar de ander schakelt, gebeurt dat in één keer. De layout van de pagina verspringt van een lijst naar rasterindeling, of andersom. Met een view transition kan je de verandering van lijst naar raster, of andersom, animeren. Dit maakt de overgang niet alleen mooier en soepeler, maar het maakt ook duidelijk dat het nog steeds om dezelfde inhoud gaat. Hier raken view transitions dus ook een stukje design en UX.

Kleurenthema verwisselingen

Ook als het gaat om themawisselingen op een website kunnen view transitions de overgang soepeler laten aanvoelen. Denk bijvoorbeeld aan een overgang van een licht naar een donker thema. Of van het standaard thema naar een thema met een hoger kleurcontrast. In plaats van de kleuren te laten verspringen, kan een view transition de overgang mooi overbruggen, en verdwijnt de ‘schok’ van de overgang.

In de praktijk

De meest eenvoudige implementatie van een view transition vereist slechts drie regels code:

@view-transition {
    navigation: auto;
}

Als je deze regels code toevoegt aan de CSS van je website krijg je een soort vervaging-effect wanneer je naar een andere pagina navigeert. Naar mijn mening maakt alleen dit al het navigeren van een website een stuk mooier en soepeler.

Het is ook mogelijk om je eigen animaties te creëren. Dit kan je doen door de oude en nieuwe staat van de pagina te benaderen. Dit kan je doen met de volgende pseudo-selectors:

::view-transition-old(root) {}
::view-transition-new(root) {}

Wanneer je navigeert zorgen deze regels ervoor dat de browser, op de achtergrond en dus nog niet zichtbaar voor de gebruiker, twee snapshots maakt. Een snapshot van de oude pagina en een snapshot van de nieuwe pagina. Daarna animeert de browser van de oude snapshot naar de nieuwe snapshot.

Zoals de namen suggereren, benaderen deze pseudo-selectors de oude en nieuwe pagina’s respectievelijk. Nu hebben we controle over wat we met de oude en nieuwe pagina willen doen. We kunnen bijvoorbeeld door middel van CSS @keyframes de oude pagina links van het scherm af laten glijden, en de nieuwe pagina vanaf rechts binnen laten glijden.

Dat zou er zo uitzien:

::view-transition-old(root) {
    animation: slide-out .8s ease-in-out;
} 

::view-transition-new(root) {
    animation: slide-in .8s ease-in-out;
}

@keyframes slide-out {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-100%);
}
} 

@keyframes slide-in {
    from {
         transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

We koppelen hier een ‘slide-out’ animatie aan de oude pagina. Deze animatie verschuift de pagina volledig links buiten beeld. De ‘slide-in’ animatie wordt gekoppeld aan de nieuwe pagina. Initieel staat de nieuwe pagina volledig rechts buiten beeld. Met de animatie wordt de pagina vanaf rechts binnen beeld geschoven.

Nu vraag je je misschien af wat ‘root’ is in de bovenstaande code. Root is hier een ‘view-transition-name’ die wordt gedefinieerd door de browser. Je zou dit zelf kunnen uitschrijven als:

:root {
    view-transition-name: root;
}

Omdat de browser deze regel voor ons definieert hebben we deze regels nu niet nodig, maar je zou deze notatie gebruiken als je een view transition wil maken voor een ander element. Op deze manier kunnen we ook element specifieke transities toevoegen. Neem als voorbeeld een titel. In mijn voorbeeld is er een titel zichtbaar op beide pagina’s. Die titel kunnen we van de oude naar de nieuwe pagina animeren. Allereerst moeten we dan een gedeelde class zetten op dit element, op de oude én nieuwe pagina:

<h1 class="heading">Page 1</h1>
En: 
<h1 class="heading heading-xl">Page 2</h1>

Het <h1> element op de oude en nieuwe pagina delen nu de ‘heading’ class. In de CSS kunnen we deze class een ‘view-transition-name’ geven om de titel te animeren:

.heading {
      view-transition-name: heading;
}

Zoals je hieronder kan zien, wordt de titel van de plek op de oude pagina geanimeerd naar zijn positie op de nieuwe pagina.

De nieuwe standaard

Kortom, view transitions zijn een mooie verrijking van het web. Je kan er ontzettend creatief mee worden en ze voegen écht wat unieks toe. Daar komt bij dat eenvoudige view transitions vrij makkelijk zijn om te implementeren. De browsersupport is ondertussen ook al redelijk goed. Op het moment van schrijven is Firefox de enige grote browser die view transitions nog niet ondersteunt. Desondanks is het een mooie nieuwe techniek die zeker het verkennen waard is. Zeker met het oog op de toekomst, wanneer deze functionaliteit nog breder wordt ondersteund.

Bellen

085 30 38 139

Mailen

info@vollan.nl

Bezoeken

Grevelingenstraat 10H 4301 XX Zierikzee

Socials

Privacyverklaring Disclaimer Sitemap Cookiebeleid