Fra tid til scroll
En almindelig CSS-animation kører normalt på dokumentets tidslinje. Scroll-driven animation skifter i stedet tidslinjen ud, så animationens fremdrift styres af scroll. Det gør effekten mere knyttet til brugerens bevægelse end til et antal sekunder.
MDN beskriver det som animationer, der kører på en scroll progress timeline eller view progress timeline i stedet for den normale DocumentTimeline. Det er en god mental model at have med fra start.
scroll(): brug scrolleren som tidslinje
scroll() følger selve scrollpositionen i en scrollcontainer. Det er godt til fx progress bars, roterende elementer eller andre effekter, hvor du vil koble animationen direkte til, hvor langt man er kommet.
.element { animation: rotate linear; animation-timeline: scroll();}En vigtig detalje fra MDN er, at animation-timeline er reset-only i animation shorthand. Derfor skal animation-timeline deklareres efter animation, ellers bliver den nulstillet tilbage til auto.
view(): følg et element gennem viewporten
view() er noget andet. Her er det ikke hele dokumentets scrollposition, men et elements synlighed i sin nærmeste scrollcontainer, der driver animationen.
.element { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;}Det er den model, der ofte føles mest naturlig til reveal-effekter, når elementer kommer ind i viewporten.
animation-range styrer den aktive del af rejsen
animation-range bestemmer, hvor på tidslinjen animationen faktisk skal være aktiv. Det er især nyttigt med view(), hvor du sjældent vil bruge hele elementets synlighedsforløb på præcis samme måde.
Syntaksen er animation-range: <start> <end>;, hvor start og end kan være keywords som entry, exit eller procentværdier. Øvrige keywords inkluderer cover, contain, start, end og center.
Tænk i, hvornår animationen skal starte og slutte, og brug evt. scroll-driven-animations.style til at finjustere.
Et lille ekstra praktisk tip: hvis du vil have animationens start- og slutstilstand til at hænge ved uden for det aktive range, skal du bruge animation-fill-mode: both.
Parallax er bare et særligt use case
Parallax-eksemplet viser det samme mønster, bare med et mere dekorativt output: et billede ændrer object-position, mens det bevæger sig gennem viewporten.
Det er en god påmindelse om, at scroll-driven animation ikke kun handler om “wow-effekter”. Det handler også om at knytte en visuel fortælling til brugerens oplevelse på en kontrolleret måde.