Mestre CSS rullestyrte animasjoner: Et dypdykk i tidslinjesynkronisering

I årevis har det å lage engasjerende, rullekoblede animasjoner på nettet vært forbeholdt JavaScript. Utviklere har stolt på biblioteker og komplekse `requestAnimationFrame`-løkker, som konstant lytter etter rullehendelser. Selv om denne tilnærmingen er effektiv, medfører den ofte en ytelseskostnad, noe som fører til hakking og en mindre jevn opplevelse, spesielt på mindre kraftige enheter. I dag er et paradigmeskifte på gang, som flytter hele denne kategorien av brukergrensesnittdesign direkte inn i nettleserens høytytende renderingsmotor, takket være CSS rullestyrte animasjoner.

Denne kraftige nye spesifikasjonen lar oss koble animasjonsfremdrift direkte til rulleposisjonen til en beholder eller synligheten til et element. Resultatet er perfekt jevne, GPU-akselererte animasjoner som er deklarative, tilgjengelige og bemerkelsesverdig effektive. Det virkelige kreative potensialet låses imidlertid opp når vi beveger oss forbi animering av enkeltelementer og begynner å orkestrere flere, komplekse interaksjoner i harmoni. Dette er kunsten animasjonssynkronisering.

I denne omfattende guiden vil vi utforske kjernekonseptene i CSS rullestyrte animasjonstidslinjer og dykke dypt ned i teknikkene som kreves for å synkronisere dem. Du vil lære hvordan du lager lagdelte parallakseffekter, sekvensielle avsløringer for historiefortelling, og komplekse komponentinteraksjoner – alt med ren CSS. Vi vil dekke:

• Den grunnleggende forskjellen mellom scroll()- og view()-tidslinjer.
• Det revolusjonerende konseptet med navngitte tidslinjer for å synkronisere flere elementer.
• Finkornet kontroll over animasjonsavspilling ved hjelp av animation-range.
• Praktiske, virkelige eksempler med kode du kan bruke i dag.
• Beste praksis for ytelse, tilgjengelighet og nettleserkompatibilitet.

Forbered deg på å revurdere hva som er mulig med CSS og løfte nettopplevelsene dine til et nytt nivå av interaktivitet og polering.

Grunnlaget: Forståelse av animasjonstidslinjer

Før vi kan synkronisere animasjoner, må vi først forstå mekanismen som driver dem. Tradisjonelt er tidslinjen til en CSS-animasjon basert på tidens gang, som definert av dens animation-duration. Med rullestyrte animasjoner kutter vi denne koblingen til tid og kobler i stedet animasjonens fremdrift til en ny kilde: en fremdriftstidslinje.

Dette oppnås primært gjennom egenskapen animation-timeline. I stedet for å la animasjonen kjøre på egen hånd etter å ha blitt utløst, forteller denne egenskapen nettleseren at den skal skrubbe gjennom animasjonens nøkkelbilder basert på fremdriften til en spesifisert tidslinje. Når tidslinjen er på 0 %, er animasjonen på sitt 0 % nøkkelbilde. Når tidslinjen er på 50 %, er animasjonen på sitt 50 % nøkkelbilde, og så videre.

CSS-spesifikasjonen gir to hovedfunksjoner for å lage disse fremdriftstidslinjene:

1. scroll(): Oppretter en anonym tidslinje som sporer rullefremdriften til en rullebeholder (en scroller).
2. view(): Oppretter en anonym tidslinje som sporer synligheten til et spesifikt element mens det beveger seg gjennom visningsområdet (eller en hvilken som helst scroller).

La oss undersøke hver av disse i detalj for å bygge et solid fundament.

Dypdykk: scroll()-fremdriftstidslinjen

Hva er `scroll()`?

Funksjonen scroll() er ideell for animasjoner som skal samsvare med den generelle rullefremdriften på en side eller et spesifikt rullbart element. Et klassisk eksempel er en lesefremdriftsindikator øverst i en artikkel som fylles opp etter hvert som brukeren ruller nedover siden.

Den måler i hvilken grad en bruker har rullet gjennom en scroller. Som standard sporer den hele dokumentets rulleposisjon, men den kan konfigureres til å spore en hvilken som helst rullbar beholder på siden.

Syntaks og parametere

Den grunnleggende syntaksen for scroll()-funksjonen er som følger:

animation-timeline: scroll(<scroller> <axis>);

La oss bryte ned parameterne:

• <scroller> (valgfri): Dette spesifiserer hvilken rullebeholders fremdrift som skal spores.
  • root: Standardverdien. Den representerer dokumentets visningsområde-scroller (hovedsidens rullefelt).
  • self: Sporer rulleposisjonen til selve elementet, forutsatt at det er en rullebeholder (f.eks. har overflow: scroll).
  • nearest: Sporer rulleposisjonen til den nærmeste overordnede rullebeholderen.
• <axis> (valgfri): Dette definerer rulleaksen som skal spores.
  • block: Standardverdien. Sporer fremdrift langs blokkaksen (vertikal for horisontale skrivemoduser som norsk).
  • inline: Sporer fremdrift langs inline-aksen (horisontal for norsk).
  • y: Et eksplisitt alias for den vertikale aksen.
  • x: Et eksplisitt alias for den horisontale aksen.

Praktisk eksempel: En fremdriftsindikator for siderulling

La oss bygge den klassiske lesefremdriftsindikatoren. Det er en perfekt demonstrasjon av scroll() i sin enkleste form.

HTML-struktur:

            <div class="progress-bar"></div>
<article>
  <h1>En lang artikkeltittel</h1>
  <p>... mye innhold her ...</p>
  <p>... mer innhold for å gjøre siden rullbar ...</p>
</article>
            

              
                Copy
              
            
          

CSS-implementering:

            /* Definer nøkkelbildene for fremdriftsindikatoren */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Stilsett fremdriftsindikatoren */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: dodgerblue;
  transform-origin: left; /* Animer skala fra venstre side */

  /* Koble animasjonen til rullestidslinjen */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

/* Grunnleggende body-styling for demonstrasjon */
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 2rem;
  height: 300vh; /* Sørg for at det er rikelig å rulle */
}
            

              
                Copy
              
            
          

Forklaring:

1. Vi definerer en enkel grow-progress-animasjon som skalerer et element horisontalt fra 0 til 1.
2. .progress-bar er festet til toppen av visningsområdet.
3. Magien skjer med de to siste egenskapene. Vi bruker grow-progress-animasjonen. Avgjørende er at i stedet for å gi den en varighet (som 1s), setter vi dens animation-timeline til scroll(root block).
4. Dette forteller nettleseren: "Ikke spill av denne animasjonen over tid. Skrubb i stedet gjennom nøkkelbildene dens etter hvert som brukeren ruller rotdokumentet vertikalt (block-aksen)."

Når brukeren er helt øverst på siden (0 % rullefremdrift), vil barens scaleX være 0. Når de er helt nederst (100 % rullefremdrift), vil dens scaleX være 1. Resultatet er en perfekt jevn fremdriftsindikator uten behov for JavaScript.

Nærhetens kraft: view()-fremdriftstidslinjen

Hva er `view()`?

Mens scroll() handler om den generelle fremdriften til en beholder, handler view() om reisen til et enkelt element over det synlige området til en scroller. Det er den native CSS-løsningen for det utrolig vanlige "animer ved avsløring"-mønsteret, der elementer toner inn, glir opp, eller på annen måte animeres når de kommer inn på skjermen.

view()-tidslinjen starter når et element først blir synlig i rulleområdet og slutter når det har passert helt ut av syne. Dette gir oss en tidslinje fra 0 % til 100 % som er direkte knyttet til et elements synlighet, noe som gjør den utrolig intuitiv for avsløringseffekter.

Syntaks og parametere

Syntaksen for view() er litt annerledes:

animation-timeline: view(<axis> <view-timeline-inset>);

• <axis> (valgfri): Det samme som i scroll() (block, inline, y, x). Den bestemmer hvilken akse av rulleområdet elementets synlighet spores mot.
• <view-timeline-inset> (valgfri): Dette er en kraftig parameter som lar deg justere grensene for det "aktive" visningsområdet. Den kan akseptere én eller to verdier (for henholdsvis start- og sluttinnsatser). Du kan bruke prosentandeler eller faste lengder. For eksempel betyr 100px 20% at tidslinjen anser visningsområdet for å starte 100px fra toppen og slutte 20 % fra bunnen. Dette gir mulighet for finjustering av når animasjonen begynner og slutter i forhold til elementets posisjon på skjermen.

Praktisk eksempel: Inntoning ved avsløring

La oss lage en klassisk effekt der innholdskort toner inn og glir på plass når de ruller inn på skjermen.

HTML-struktur:

            <section class="content-grid">
  <div class="card">Kort 1</div>
  <div class="card">Kort 2</div>
  <div class="card">Kort 3</div>
  <div class="card">Kort 4</div>
</section>
            

              
                Copy
              
            
          

CSS-implementering:

            /* Definer nøkkelbilder for avsløringsanimasjonen */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  /* Bruk animasjonen på hvert kort */
  animation: fade-in-up linear;
  animation-timeline: view(); /* Det er alt som skal til! */

  /* Annen styling */
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
  min-height: 200px;
  display: grid;
  place-content: center;
  font-size: 2rem;
}

/* Layout-styling */
.content-grid {
  display: grid;
  gap: 2rem;
  padding: 10vh 2rem;
}
            

              
                Copy
              
            
          

Forklaring:

1. fade-in-up-nøkkelbildene definerer animasjonen vi ønsker: start gjennomsiktig og litt lavere, slutt ugjennomsiktig og i sin endelige posisjon.
2. Hvert .card-element får denne animasjonen.
3. Den avgjørende linjen er animation-timeline: view();. Dette skaper en unik, anonym tidslinje for hvert kort.
4. For hvert enkelt kort vil animasjonen være på 0 % når det akkurat begynner å komme inn i visningsområdet, og vil nå 100 % når det akkurat er ferdig med å forlate visningsområdet.

Når du ruller nedover siden, vil hvert kort jevnt animeres på plass nøyaktig når det kommer til syne. Dette oppnås med bare to linjer CSS, en bragd som tidligere krevde en JavaScript Intersection Observer og nøye tilstandshåndtering.

Kjernetemaet: Animasjonssynkronisering

Å bruke anonyme scroll()- og view()-tidslinjer er kraftig for isolerte effekter. Men hva om vi vil at flere elementer skal reagere på den samme tidslinjen? Se for deg en parallakseffekt der et bakgrunnsbilde, en tittel og et forgrunnselement alle beveger seg med forskjellige hastigheter, men alle drives av den samme rullehandlingen. Eller et produktbilde som transformerer seg mens du ruller forbi en liste over funksjonene.

Det er her synkronisering kommer inn, og nøkkelen er å gå fra anonyme tidslinjer til navngitte tidslinjer.

Hvorfor synkronisere?

Synkronisering muliggjør opprettelsen av rike, narrative-drevne opplevelser. I stedet for en samling av uavhengige animasjoner, kan du bygge en sammenhengende scene som utvikler seg mens brukeren ruller. Dette er avgjørende for:

• Komplekse parallakseffekter: Skape en følelse av dybde ved å flytte forskjellige lag med varierende hastigheter i forhold til en enkelt rulleutløser.
• Koordinerte komponenttilstander: Animere forskjellige deler av en kompleks UI-komponent i fellesskap når den ruller inn i syne.
• Visuell historiefortelling: Avsløre og transformere elementer i en nøye koreografert sekvens for å guide brukeren gjennom en fortelling.

Teknikk: Delte navngitte tidslinjer

Mekanismen for synkronisering involverer tre nye CSS-egenskaper:

1. timeline-scope: Brukes på et beholder-element. Den etablerer et omfang der navngitte tidslinjer definert innenfor det kan bli funnet av andre elementer.
2. scroll-timeline-name / view-timeline-name: Brukes på et element for å opprette og navngi en tidslinje. Navnet må være en dashed-ident (f.eks. --my-timeline). Dette elementets rullefremdrift (scroll-timeline-name) eller synlighet (view-timeline-name) blir kilden for den navngitte tidslinjen.
3. animation-timeline: Vi har sett denne før, men nå, i stedet for å bruke scroll() eller view(), gir vi den dashed-ident-navnet på vår delte tidslinje (f.eks. animation-timeline: --my-timeline;).

Prosessen er som følger: 1. Et overordnet element definerer en timeline-scope. 2. Et underordnet element definerer og navngir en tidslinje ved hjelp av view-timeline-name eller scroll-timeline-name. 3. Ethvert annet underordnet element kan deretter bruke det navnet i sin animation-timeline-egenskap for å koble seg til den samme tidslinjen.

Praktisk eksempel: En flerlags parallaksscene

La oss bygge en klassisk parallaks-header der et bakgrunnsbilde ruller saktere enn siden, og en tittel toner ut raskere.

HTML-struktur:

            <div class="parallax-container">
  <div class="parallax-background"></div>
  <h1 class="parallax-title">Synkronisert bevegelse</h1>
</div>
<div class="content">
  <p>... hovedinnhold på siden ...</p>
</div>
            

              
                Copy
              
            
          

CSS-implementering:

            /* 1. Definer et omfang for vår navngitte tidslinje */
.parallax-container {
  timeline-scope: --parallax-scene;
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 2. Definer selve tidslinjen ved hjelp av beholderens synlighet */
/* Beholderens reise gjennom visningsområdet vil drive animasjonene */
.parallax-container {
  view-timeline-name: --parallax-scene;
}

/* 3. Definer nøkkelbildene for hvert lag */
@keyframes move-background {
  to {
    transform: translateY(30vh); /* Beveger seg saktere */
  }
}

@keyframes fade-title {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* 4. Stilsett lagene og koble dem til den navngitte tidslinjen */
.parallax-background {
  position: absolute;
  inset: -30vh 0 0 0; /* Ekstra høyde for å tillate bevegelse */
  background: url('https://picsum.photos/1600/1200') no-repeat center center/cover;
  z-index: -1;

  /* Koble til den delte tidslinjen */
  animation: move-background linear;
  animation-timeline: --parallax-scene;
}

.parallax-title {
  color: white;
  font-size: 5rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);

  /* Koble til den samme delte tidslinjen */
  animation: fade-title linear;
  animation-timeline: --parallax-scene;
}

            

              
                Copy
              
            
          

Forklaring:

1. .parallax-container etablerer en timeline-scope med navnet --parallax-scene. Dette gjør navnet tilgjengelig for sine barn.
2. Vi legger deretter til view-timeline-name: --parallax-scene; på det samme elementet. Dette betyr at tidslinjen med navnet --parallax-scene vil være en view()-tidslinje basert på synligheten til .parallax-container selv.
3. Vi lager to forskjellige animasjoner: move-background for en subtil vertikal forskyvning og fade-title for en tone-og-skaler-effekt.
4. Avgjørende er at både .parallax-background og .parallax-title har sin animation-timeline-egenskap satt til --parallax-scene.

Nå, når .parallax-container ruller gjennom visningsområdet, genererer den en enkelt fremdriftsverdi. Både bakgrunnen og tittelen bruker den samme verdien til å drive sine respektive animasjoner. Selv om nøkkelbildene deres er helt forskjellige, er avspillingen deres perfekt synkronisert, noe som skaper en sammenhengende og imponerende visuell effekt.

Avansert synkronisering med `animation-range`

Navngitte tidslinjer er fantastiske for å få animasjoner til å spille av i fellesskap. Men hva om du vil at de skal spilles av i sekvens eller at en animasjon bare skal utløses under en bestemt del av et annet elements synlighet? Det er her animation-range-egenskapsfamilien gir et nytt lag med kraftig kontroll.

Utover 0 % til 100 %

Som standard er en animasjon kartlagt til hele varigheten av tidslinjen. animation-range lar deg definere de spesifikke start- og sluttpunktene på tidslinjen som skal tilsvare 0 %- og 100 %-punktene i animasjonens nøkkelbilder.

Dette lar deg si ting som, "Start denne animasjonen når elementet kommer inn på 20 % av skjermen, og fullfør den innen det når 50 %-merket."

Forståelse av `animation-range`-verdier

Syntaksen er animation-range-start og animation-range-end, eller kortformen animation-range.

animation-range: <start-range> <end-range>;

Verdiene kan være en kombinasjon av spesielle nøkkelord og prosentandeler. For en view()-tidslinje er de vanligste nøkkelordene:

• entry: Øyeblikket elementets border box krysser sluttkanten av rulleområdet.
• exit: Øyeblikket elementets border box krysser startkanten av rulleområdet.
• cover: Spenner over hele perioden elementet dekker rulleområdet, fra øyeblikket det dekker det helt til øyeblikket det slutter.
• contain: Spenner over perioden der elementet er fullstendig inneholdt i rulleområdet.

Du kan også legge til prosentvise forskyvninger til disse, som entry 0% (standard start), entry 100% (når elementets nedre kant møter visningsområdets nedre kant), exit 0% og exit 100%.

Praktisk eksempel: En sekvensiell historiefortellingsscene

La oss lage en funksjonsliste der hvert element fremheves mens du ruller forbi det, ved hjelp av en enkelt delt tidslinje for perfekt koordinering.

HTML-struktur:

            <div class="feature-list-container">
  <div class="feature-list-timeline-marker"></div>
  <div class="feature-item">
    <h3>Funksjon én: Global rekkevidde</h3>
    <p>Våre tjenester er tilgjengelige over hele verden.</p>
  </div>
  <div class="feature-item">
    <h3>Funksjon to: Uslåelig hastighet</h3>
    <p>Opplev neste generasjons ytelse.</p>
  </div>
  <div class="feature-item">
    <h3>Funksjon tre: Jernkledd sikkerhet</h3>
    <p>Dine data er alltid beskyttet.</p>
  </div>
</div>
            

              
                Copy
              
            
          

CSS-implementering:

            /* Definer omfanget på hovedbeholderen */
.feature-list-container {
  timeline-scope: --feature-list;
  position: relative;
  padding: 50vh 0; /* Gi plass til rulling */
}

/* Bruk en dedikert tom div for å definere tidslinjens kilde */
.feature-list-timeline-marker {
  view-timeline-name: --feature-list;
  position: absolute;
  inset: 0;
}

/* Nøkkelbilder for å fremheve et element */
@keyframes highlight-feature {
  to { 
    background-color: lightgoldenrodyellow;
    transform: scale(1.02);
  }
}

.feature-item {
  width: 80%;
  margin: 5rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;

  /* Koble til animasjon og den delte tidslinjen */
  animation: highlight-feature linear both;
  animation-timeline: --feature-list;
}

/* Magien med animation-range for sekvensering */
.feature-item:nth-of-type(1) {
  animation-range: entry 5% entry 40%;
}

.feature-item:nth-of-type(2) {
  animation-range: entry 35% entry 70%;
}

.feature-item:nth-of-type(3) {
  animation-range: entry 65% entry 100%;
}

            

              
                Copy
              
            
          

Forklaring:

1. Vi etablerer et --feature-list-omfang og lager en navngitt view()-tidslinje knyttet til en tom markør-div som spenner over hele beholderen. Denne ene tidslinjen sporer synligheten til hele funksjonsseksjonen.
2. Hvert .feature-item er koblet til den samme --feature-list-tidslinjen og gitt den samme highlight-feature-animasjonen.
3. Den avgjørende delen er animation-range. Uten den ville alle tre elementene blitt fremhevet samtidig som beholderen ruller inn i syne.
4. I stedet tildeler vi forskjellige områder:
   • Det første elementet animeres mellom 5 % og 40 % av tidslinjens fremdrift.
   • Det andre elementet animeres i løpet av 35 % til 70 %-vinduet.
   • Det tredje animeres fra 65 % til 100 %.

Dette skaper en herlig sekvensiell effekt. Mens du ruller, fremheves den første funksjonen. Mens du fortsetter å rulle, toner den tilbake mens den andre fremheves, og så videre. De overlappende områdene (entry 40% og entry 35%) skaper en jevn overlevering. Denne avanserte sekvenseringen og synkroniseringen oppnås med bare noen få linjer deklarativ CSS.

Ytelse og beste praksis

Selv om CSS rullestyrte animasjoner er utrolig kraftige, er det viktig å bruke dem ansvarlig. Her er noen sentrale beste praksiser for et globalt publikum.

Ytelsesfordelen

Den primære fordelen med denne teknologien er ytelse. I motsetning til JavaScript-baserte rullelyttere som kjører på hovedtråden og kan blokkeres av andre oppgaver, kjører CSS rullestyrte animasjoner på compositor-tråden. Dette betyr at de forblir silkemyke selv når hovedtråden er opptatt. For å maksimere denne fordelen, hold deg til å animere egenskaper som er billige å komponere, primært transform og opacity.

Tilgjengelighetshensyn

Ikke alle ønsker eller tåler bevegelse på nettsider. Det er avgjørende å respektere brukerpreferanser. Bruk prefers-reduced-motion-mediespørringen for å deaktivere eller redusere animasjonene dine for brukere som har denne innstillingen aktivert i operativsystemet sitt.

            @media (prefers-reduced-motion: reduce) {
  .card,
  .parallax-background,
  .parallax-title,
  .feature-item {
    /* Deaktiver animasjonene */
    animation: none;
    /* Sørg for at elementene er i sin endelige, synlige tilstand */
    opacity: 1;
    transform: none;
  }
}

            

              
                Copy
              
            
          

Nettleserstøtte og fallbacks

Per sent 2023 er CSS rullestyrte animasjoner støttet i Chromium-baserte nettlesere (Chrome, Edge) og er under aktiv utvikling i Firefox og Safari. For et globalt publikum må du vurdere nettlesere som ennå ikke støtter denne funksjonen. Bruk @supports-regelen for å anvende animasjoner bare der de støttes.

            /* Standardtilstand for nettlesere som ikke støtter funksjonen */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Anvend animasjoner bare i nettlesere som støtter det */
@supports (animation-timeline: view()) {
  .card {
    opacity: 0; /* Starttilstand for animasjon */
    transform: translateY(50px);
    animation: fade-in-up linear;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

Denne progressive forbedringstilnærmingen sikrer en funksjonell opplevelse for alle brukere, med en forbedret, animert opplevelse for de på moderne nettlesere.

Feilsøkingstips

Moderne nettleserutviklerverktøy legger til støtte for feilsøking av rullestyrte animasjoner. I Chrome DevTools kan du for eksempel inspisere et element og finne en ny seksjon i "Animations"-panelet som lar deg se tidslinjens fremdrift og skrubbe gjennom den manuelt, noe som gjør det mye enklere å finjustere animation-range-verdiene dine.

Konklusjon: Fremtiden er rullestyrt

CSS rullestyrte animasjoner, og spesielt muligheten til å synkronisere dem med navngitte tidslinjer, representerer et monumentalt sprang fremover for webdesign og -utvikling. Vi har beveget oss fra imperative, ofte skjøre JavaScript-løsninger til en deklarativ, ytelsessterk og tilgjengelig CSS-native tilnærming.

Vi har utforsket de grunnleggende konseptene scroll()- og view()-tidslinjer, som håndterer henholdsvis fremdrift på sidenivå og elementnivå. Enda viktigere, vi har låst opp kraften i synkronisering ved å lage delte, navngitte tidslinjer med timeline-scope og view-timeline-name. Dette lar oss bygge komplekse, koordinerte visuelle fortellinger som parallaksscener. Til slutt, med animation-range, har vi fått granulær kontroll for å sekvensere animasjoner og skape intrikate, overlappende interaksjoner.

Ved å mestre disse teknikkene bygger du ikke lenger bare nettsider; du skaper dynamiske, engasjerende og ytelsessterke digitale historier. Etter hvert som nettleserstøtten fortsetter å utvides, vil disse verktøyene bli en essensiell del av enhver frontend-utviklers verktøykasse. Fremtiden for webinteraksjon er her, og den drives av rullefeltet.