Vieritykseen perustuvat animaatiot: animation-timeline IntersectionObserverin sijaan

Scroll-driven animations leikkaa ongelman juurelta. Se on sama CSS-animaatio jonka jo tunnet, yhdellä muutoksella: sen sijaan että aika ohjaa edistymistä, vierityskontainerin sijainti tekee sen. Selain voi ajaa sen compositoreilla.

Neljän rivin edistymispalkki

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

Paljastaminen vierittäessä: view()-aikajana

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

Neljä nimettyä aluetta: entry, exit, cover (oletus), contain.

Tunnin maksava sudenkuoppa: animation-lyhenne nollaa aikajanaan

css

/* RIKKI: lyhenne nollaa animation-timeline arvoon auto */
.reveal {
animation-timeline: view();
animation-range: entry 0% entry 60%;
animation: fade-up linear both;
}

css

/* Oikein: aikajana ja alue lyhenteen jälkeen */
.reveal {
animation: fade-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}

Nimetyt aikajanat

css

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

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

Progressiivinen parannus ei ole valinnainen tässä

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

Sudenkuopat ja parhaat käytännöt

• Animoi vain transform ja opacity.
• Älä koskaan piilota sisältöä jonka vain animaatio voi paljastaa.
• «Miksi animaationi seisoo?» on lähes aina vierityskontaineri.
• Käytä both täyttötilana.
• Vähennetty liike on lääketieteellinen asetus, ei kohteliaisuus.
• Älä poista JavaScript-koodia jota tarvitset edelleen.

Yhteenveto

Scroll-driven animations soveltaa samaa pääsäieajatusta kokonaiseen efektiluokkaan: se mikä vaati vierityksen kuuntelijan, observerin ja luokanvaihdon muuttuu yhdeksi CSS-ominaisuudeksi.