Replace many JS scroll observers with native CSS:
Zero JS. Browser-native. Falls back gracefully on older engines.
Notes
Snippets, observations, and things worth keeping.
Snippets, observations, and things worth keeping.
§ Notes · 2026-03-15
animation-timeline lets you drive keyframes from scroll position — no JS, no observer.
1 min read
Replace many JS scroll observers with native CSS:
Zero JS. Browser-native. Falls back gracefully on older engines.
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 10% cover 30%;
}