useScroll: Making scroll-driven animations

Unlock this video and the rest of this course by joining Frontend.FYI PRO .

Framer Motion makes it super easy to create basic scroll-driven animations. You import the useScroll hook, and all of a sudden you have access to 4 variables that tell you everything you need to know about the scroll position.

1
const { scrollYProgress, scrollY, scrollXProgress, scrollX } = useScroll();

By default this hook will track the scroll progress of the full window. scrollX and scrollY will give you the scrolled distance in pixels, while scrollXProgress and scrollYProgress will give you the progress in a range from 0 to 1.

All properties returned from the hook, are motion values too. This means you can use them in your animations directly. Imagine making a scroll progress indicator, where the number between 0 and 1 is directly tied to the scaleX of that progress bar!