Tilbage til Testimonials-komponenten

Kontekstdrevet UI

Scroll-driven progress og timeline-scope

Lad scrollerens position drive en progressindikator – også når indikatoren er en søskende.

Se undervisningsslides

Relevante links

TL;DR

  1. En scroll-driven animation bruger scrollposition som tidslinje i stedet for sekunder.
  2. Scrolleren producerer en timeline, mens progressindikatoren forbruger den.
  3. timeline-scope gør et timeline-navn synligt for søskende under en fælles ancestor.

Fra tid til scroll

En almindelig animation bruger dokumentets tidslinje:

.indicator {
  animation: progress 2s linear;
}

Med en scroll timeline bliver progressionen i stedet bundet til, hvor langt brugeren har scrollet:

.indicator {
  animation: progress linear both;
  animation-timeline: scroll();
}

Deklarér animation-timeline efter animation, fordi animation-shorthanden ellers nulstiller den. Animér helst compositor-venlige properties som scale eller transform frem for selve bredden.

Del en navngiven timeline

I testimonials-komponenten er scroller og indikator søskende. Scrolleren producerer en navngiven timeline:

.scroller {
  scroll-timeline: --testimonials inline;
}

Progressindikatoren vil bruge samme navn:

.progress > span {
  transform-origin: left;
  animation: show-progress linear both;
  animation-timeline: --testimonials;
}

Navnet er normalt kun synligt i scrollerens egen subtree. En fælles ancestor kan løfte navnet ind i et scope, som begge søskende kan bruge:

.testimonials {
  timeline-scope: --testimonials;
}

Det er en vigtig mental model: timeline-kilden og det animerede element behøver ikke være det samme element, men navnet skal være synligt dér, hvor det bruges.

Progressiv og tilgængelig forbedring

En rent visuel indikator bør have aria-hidden="true". Brug prefers-reduced-motion ved større eller dekorative effekter.

Indholdets egentlige navigation må ikke afhænge af animationen. Testimonials skal stadig kunne scrolles og læses, hvis progressbaren står stille.

Se mere