Lesson 5/8

useScroll: Making scroll-driven animations

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 {
2
scrollYProgress,
3
scrollY,
4
scrollXProgress,
5
scrollX
6
} = 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!

Click that button 👀

Unlock the full lesson with PRO

Want to read the full lesson? Join Frontend.FYI PRO.

PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!