preset
@keyframes reveal {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
animation: reveal both;
animation-timeline: view();
animation-range: entry 0% cover 35%;
}
Heads up: animation-timeline: view()/scroll() is supported in Chrome and Edge (115+) and Safari TP. Firefox is rolling it out. For broader support, fall back to IntersectionObserver + class toggle.
About this tool
How to use it
- Choose a CSS property to animate (opacity, transform, etc.).
- Set the start and end values and the scroll range.
- Copy the scroll-timeline CSS.
Why it lives here
Everything runs in your browser. No account, no ads, no tracking, and no upload.