Rulleanimationer: animation-timeline i stedet for IntersectionObserver

Scroll-driven animations skærer problemet ved roden. Det er den samme CSS-animation du allerede kender, med én erstatning: i stedet for at tid driver fremgangen, gør positionen af en rulleholder det. Browseren kan køre det på compositoren.

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 navngivne områder: entry, exit, cover (standard), contain.

Fælden der koster en time: animation-forkortelsen nulstiller tidslinjen

css

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

css

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

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

Faldgruber og bedste praksis

• Animer kun transform og opacity.
• Skjul aldrig indhold som kun en animation kan afsløre.
• «Hvorfor står min animation stille?» er næsten altid rulleholderen.
• Brug both som fill-mode.
• Reduceret bevægelse er en medicinsk indstilling, ikke høflighed.
• Slet ikke JavaScript du stadig har brug for.

Konklusion

Scroll-driven animations anvender den samme idé om hovedtråden på en hel kategori effekter: det der krævede en scroll-lytter, en observer og et klasseSkift bliver én CSS-egenskab.