# Scroll Progress
> Interactive scroll progress animation example using Svelte Motion useScroll and useSpring.
**Source:** [https://motion.svelte.page/examples/scroll-progress](https://motion.svelte.page/examples/scroll-progress)
**Markdown mirror:** [https://motion.svelte.page/examples/scroll-progress.md](https://motion.svelte.page/examples/scroll-progress.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: scroll-linked progress.
`useScroll` emits a 0→1 motion value tracking a container's scroll position. Pass it through `useSpring` and drive `transform: scaleX(progress)` on a bar — it grows as the user scrolls.
**Metadata:** tag: `SCROLL` | pattern: `useScroll + useSpring`
### Notes
- `useScroll({ container })` returns a `scrollYProgress` motion value that runs 0 at the top to 1 at the bottom. Reading `$scrollYProgress` directly gives you the raw scroll fraction.
- Wrapping it in `useSpring` turns the linear progress into a smoothed motion value — the bar lags slightly and overshoots gently. Drop the spring if you want strict 1:1 scroll mapping.
- The container is passed as a getter (`container: () => containerEl`) so `useScroll` can resolve the bound element after mount — at script-run time the binding is still undefined.
### Source
#### Default.svelte
Source file: [src/lib/examples/scroll-progress/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/scroll-progress/demos/Default.svelte)
```svelte