Mykere overganger i tv.nrk.no

Bli med i kode-kulissene for å forstå hvordan vi gir NRK TV i nettleseren mer av den gode «app-følelsen».

For to år siden begynte vi å endre arkitekturen bak tv.nrk.no. I dag bruker vi teknologien view transitions for å gi brukeren «app-følelsen» i en klassisk web-arkitektur. Litt enkelt forklart muliggjør denne teknologien animasjoner ved sidenavigering på et nettsted.

Appfølelsen

Rammeverk som React har hatt så stor popularitet de siste årene at brukeren er vant til at nettsider oppfører seg som en ensideapplikasjon («single page application», SPA).

Det vil si at sidenavigeringer etter første innlasting skjer raskt og kan være animerte. Mobilapplikasjoner oppfører seg på samme måte.

Dette gjør at brukerne har visse forventninger når de kommer til en nettside. I en flersideapplikasjon («multi page application», MPA), har dette vært vanskelig å få til, men en slik arkitektur har andre fordeler. Vi ønsket oss begge deler.

MPA versus SPA

MPA er den klassiske web-arkitekturen og slik de første nettsidene på internett fungerte. Da laster man inn et HTML-dokument per sidenavigasjon.

SPA har blitt popularisert spesielt gjennom rammeverk som React, der man laster inn kun ett HTML-dokument, og deretter bruker JavaScript for å populere siden med GUI-elementer og ta seg av sidenavigasjon.

De to ulike arkitekturene har hver sine fordeler og ulemper. Det viktigste argumentet for oss, og som gjorde at vi valgte å bygge tv.nrk.no som en MPA, var ytelse. I en MPA inneholder det første HTML-dokumentet tilnærmet alt som trengs for å vise brukeren en ferdig nettside, og man trenger ikke vente på at JavaScript-filer skal lastes ferdig før man i det hele tatt kan begynne å tegne nettsiden.

MPA et godt utgangspunkt for å score høyt på ytelses-metrikker som Googles Web Vitals, som gir et godt grunnlag for en god brukeropplevelse.

Hvorfor view transitions?

De anerkjente UX-ekspertene i Nielsen Norman Group mener følgende responstider gjelder for web-plattformen:

• 0.1 sekund: Brukeren har følelsen av umiddelbar respons.
• 1 sekund: Brukerens opplevelse av å være i flyt blir ikke brutt. Brukeren opplever ikke at hen venter. Denne metrikken er viktig for god navigasjon.
• 10 sekunder: Brukeren mister ikke oppmerksomheten. Om brukeren må vente lenger enn dette, begynner hen å tenke på andre ting.

Hvis vi kombinerer dette med deres forskning på at det er positivt å alltid gi en type form for feedback på en brukerinteraksjon, har vi argumentert for hvorfor det er lurt med animasjoner mellom sider.

Hvis vi tar et bilde av forrige nettside, og animerer det over til den neste, gir vi brukeren hele veien en opplevelse av at noe skjer. Da er det er mindre risiko for at vi overstiger 1-sekundsregelen som innebærer at brukeren ikke lenger føler flyt.

View transitions mellom sider

View transitions gjør nettopp dette – tar bilde av nettsiden før og etter en sidenavigasjon og animerer mellom disse. View transitions kan brukes både i en SPA og i en MPA.

I en SPA kalles det «same document view transitions» og i en MPA kalles det «cross document view transitions». I denne artikkelen skal vi fokusere på sistnevnte, siden det er slik vi bruker det i tv.nrk.no, men fremgangsmåten er relativt lik i begge tilfeller.

For å legge til view transitions i en MPA, må alle sider man skal animere fra og til inneholde CSS-kodesnutten under:

@view-transition {
   navigation: auto;
}

Da vil forrige siden animeres ut ved at opasiteten går fra 1 til 0, og den nye siden animeres inn ved opasiteten går fra 0 til 1. Det er dette vi gjør på tv.nrk.no, og videoene under viser hvordan tv.nrk.no ser ut uten og med en slik view transition. (Hastigheten på videoene er 50 prosent sakket ned så man enklere ser forskjellen.)

Uten view transition der sidenavigeringen blir hard og brå:

Med view transition der overgangen blir mykere:

Man kan imidlertid spesifisere animasjonen selv ved hjelp av pseudo-elementene ::view-transition-old og ::view-transition-new. Slik kan man for eksempel oppnå at den neste siden kommer inn fra høyre for å signalisere et side-hierarki (ofte brukt mobilapplikasjoner). Dette kan man lese mer om i Google sin artikkel Cross-document view transtions for multi-page applications.

View transition mellom samme element på ulike sider

Vi animerer også mellom like elementer på ulike sider. For eksempel har vi logoer for serier som vises både på forsiden og serie-siden. Videoen under viser hvordan vi animerer en slik logo – det skjer en translasjon og en skalering av logoen.

Dette oppnår vi ved å benytte oss av view transition API-et sine eventer pageswap og pagereveal. Elementet som er likt på tvers trenger CSS property-en view-transition-name på begge sidene, og verdien må være den samme.

Vi legger til view-transition-name: content-logo både på forsiden og serie-siden via JavaScript i begge eventene.

window.addEventListener('pageswap', async (e) => {
   if (e.viewTransition && window.navigation) {
      const navigatingToSeriesPage =
      e.activation.entry.url.includes('/serie/');

      if (navigatingToSeriesPage) {
         const linkWithLogo= document.querySelector(
            '[data-link-with-logo-clicked]',
         );

         if (linkWithLogo) {
            const seriesLogo = linkWithLogo.querySelector(
               'content-logo');
            linkWithLogo.removeAttribute(
               'data-link-with-logo-clicked');

            if (seriesLogo) {
               seriesLogo.style.viewTransitionName = content-logo';
               await e.viewTransition.finished;
               seriesLogo.style.viewTransitionName = 'none';
            }
         }
      }
   }
});

window.addEventListener('pagereveal', async (e) => {
   if (e.viewTransition && window.navigation) {
      const isSeriesPage =
      window.navigation.activation.entry.url.includes('/serie/');

      if (isSeriesPage) {
         const seriesLogo = document.querySelector('content-logo');

         if (seriesLogo) {
            seriesLogo.style.viewTransitionName = 'content-logo';
            await e.viewTransition.ready;
            seriesLogo.style.viewTransitionName = 'none';
         }
      }
   }
});

Manglende nettleserstøtte er et hinder

Foreløpig fungerer view transitions som en progressiv forbedring på tv.nrk.no. Eksempelvis ser vi at på tv.nrk.no i dag (per 13.06.25) fungerer animasjonen mellom sider godt både i Chrome og Safari, men animeringen av logo fungerer kun i Chrome.

Ifølge caniuse.com er «cross-document view transitions» kun støttet fra og med Chrome og Edge 126 (fra juni 2024), og Safari 18.2 (fra des 2024).

Heldigvis er «View Transition API» et av fokusområdene for Interop 2025. Interop er et samarbeid på tvers av nettleser-leverandører. Via prosjektets dashboard kan man følge de ulike nettleserens status på ulike features.

Vi ønsker å spre det glade budskap om view transitions, slik at kanskje flere tar det i bruk. Økt bruk vil øke sannsynligheten for god nettleser-støtte på tvers på sikt. Vi krysser fingrene! 🤞

Ressurser:

• Google Chrome for developers: Smooth transitions with the View Transition API (10.06.25)
• Google Chrome for developers: Cross-document view transitions for multi-page applications (13.06.25)
• Jakob Nielsen (Nielsen Norman Group): Website Response Times (13.06.25)
• Katie Sherwin (Nielsen Norman Group): Progress Indicators Make a Slow System Less Insufferable (13.06.25)
• Caniuse.com: View Transitions (cross-document) (13.06.25)