useScroll
useScroll
is used to create scroll-linked animations, like progress indicators and parallax effects.
const { scrollYProgress } = useScroll()
<Motion :style="{ scaleX: scrollYProgress }" />
Usage
import { useScroll } from 'motion-v'
useScroll
returns four motion values:
scrollX
/Y
: The absolute scroll position, in pixels.scrollXProgress
/YProgress
: The scroll position between the defined offsets, as a value between 0 and 1.
Page scroll
By default, useScroll
tracks the page scroll.
const { scrollY } = useScroll()
useMotionValue(scrollY, 'change', (latest) => {
console.log('Page scroll: ', latest)
})
For example, we could show a page scroll indicator by passing scrollYProgress
straight to the scaleX
style of a progress bar.
As useScroll
returns motion values, we can compose this scroll info with other motion value hooks like useTransform
and useSpring
: