scroll()
Create anonymous scroll timelines for `animation-timeline`: `scroll()` tracks a scroll container, `view()` tracks the element's own trip through the visible area.
Syntax
animation-timeline: scroll(scroller axis) | view(axis inset);Parameters
| Parameter | Type | Description |
|---|---|---|
| scroller | nearest | root | self | `scroll()` only. Which container: `nearest` (default), `root` (the page) or `self`. |
| axis | block | inline | x | y | The scroll direction: `block` (default), `inline`, `x` or `y`. |
| inset | length | % | `view()` only. Shrinks the visible area, e.g. `view(block 20%)`. |
Examples
Items fade and slide in as they scroll into view:
<style>
.list { height: 180px; overflow-y: auto; border: 1px solid #ccc; padding: 8px; }
.item {
height: 60px; margin-bottom: 8px; background: lightblue;
animation: appear linear both;
animation-timeline: view();
animation-range: entry;
}
@keyframes appear { from { opacity: 0; translate: -40px 0; } }
</style>
<div class="list">
<div class="item">One</div><div class="item">Two</div><div class="item">Three</div>
<div class="item">Four</div><div class="item">Five</div><div class="item">Six</div>
</div>Notes
scroll() is right for indicators tied to the whole scroll (progress bars, a shrinking header). view() is right for effects of a single element — appearing, parallax. Both need a scrollable container; if nothing scrolls, the animation stays at its start.
See also
- animation-timeline — Ties a CSS animation to scrolling instead of time: the animation progresses as the page or an element is scrolled.
- animation-range — Sets which part of a scroll timeline the animation occupies — for example, only while the element is entering the screen.
- @keyframes — Describes the steps of an animation that is then started with the `animation` property.
Related recipes
In the tutorial
- Scroll-driven animations — Animations tied to scrolling — animation-timeline with the scroll() and view() functions, a reading progress bar, revealing blocks on scroll, animation-range, browser support and a fallback.