Rulleanimasjoner: animation-timeline i stedet for IntersectionObserver

Scroll-driven animations kutter problemet ved roten. Det er den samme CSS-animasjonen du allerede kjenner, med én erstatning: i stedet for at tid driver fremdriften, gjør posisjonen til en rullebeholder det. Nettleseren kan kjøre det på kompositoren.

En fremdriftslinje i fire linjer

css

.progress {
position: fixed;
inset: 0 0 auto 0;
height: 4px;
transform-origin: left;
animation: grow linear both;
animation-timeline: scroll(root block);
}

@keyframes grow {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}

Reveal on scroll: view()-tidslinjen

css

.reveal {
animation: fade-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}

@keyframes fade-up {
from { opacity: 0; transform: translateY(32px); }
to   { opacity: 1; transform: translateY(0); }
}

De fire navngitte områdene: entry, exit, cover (standard), contain.

Fellen som koster en time: animation-forkortelsen tilbakestiller tidslinjen

css

/* ØDELAGT: forkortelsen tilbakestiller animation-timeline til auto */
.reveal {
animation-timeline: view();
animation-range: entry 0% entry 60%;
animation: fade-up linear both;
}

css

/* Riktig: tidslinje og område etter forkortelsen */
.reveal {
animation: fade-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}

Navngitte tidslinjer

css

.gallery {
overflow-x: auto;
scroll-timeline: --gallery inline;
}

.gallery-indicator {
animation: fill linear both;
animation-timeline: --gallery;
timeline-scope: --gallery;
}

Progressiv forbedring er ikke valgfri her

css

.reveal {
opacity: 1;
}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
}

Fallgruver og beste praksis

• Bare animer transform og opacity.
• Aldri skjul innhold som bare en animasjon kan avsløre.
• «Hvorfor står animasjonen min stille?» er nesten alltid rullebeholderen.
• Bruk both som fill-modus.
• Redusert bevegelse er en medisinsk innstilling, ikke en høflighet.
• Ikke slett JavaScript du fortsatt trenger.

Konklusjon

Scroll-driven animations anvender samme idé om hoved-tråden på en hel kategori effekter: det som krevde en scroll-lytter, en observer og et klassebytte blir én CSS-egenskap.