Rullningsanimationer: animation-timeline i stället för IntersectionObserver

Scroll-driven animations skär problemet vid roten. Det är samma CSS-animation du redan känner till, med en substitution: istället för att tid driver framsteg gör positionen på en rullningsbehållare det. Webbläsaren kan köra det på compositorn.

En förloppsindikator på fyra rader

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 fyra namngivna intervallen: entry, exit, cover (standard), contain.

Fällan som kostar en timme: animation-förkortningen återställer tidslinjen

css

/* TRASIGT: förkortningen återställer animation-timeline till auto */
.reveal {
animation-timeline: view();
animation-range: entry 0% entry 60%;
animation: fade-up linear both;
}

css

/* Rätt: tidslinje och intervall efter förkortningen */
.reveal {
animation: fade-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}

Namngivna tidslinjer

css

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

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

Progressiv förbättring är inte valfritt här

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%;
  }
}
}

Fallgropar och bästa praxis

• Animera bara transform och opacity.
• Dölj aldrig innehåll som bara en animation kan avslöja.
• «Varför står min animation still?» är nästan alltid rullningsbehållaren.
• Använd both som fill-läge.
• Reducerad rörelse är en medicinsk inställning, inte artighet.
• Ta inte bort JavaScript du fortfarande behöver.

Slutsats

Scroll-driven animations tillämpar samma idé om huvudtråden på en hel kategori effekter: det som krävde en scroll-lyssnare, en observer och ett klassbyte blir en enda CSS-egenskap.