Tracking Scroll Progress and Direction with Motion for React

The building blocks of scroll-driven animations are pretty simple to set up using Motion for React.

We can track page scroll and scroll direction in just a few lines of code.

Scroll Progress

const { scrollYProgress } = useScroll()

scrollYProgress is an automatically tracked motion value between 0 and 1. It approaches 1 as we scroll toward the bottom of the page.

Scroll Direction

To track scroll direction, we just need to take the difference between the current and previous scrollYProgress.

We'll use React state to keep track of the current scroll direction and use Motion's useMotionValueEvent to update our state any time scrollYProgress changes.

We'll pass in the current motion value as an argument to our handler. Then we'll get the previous value of scrollYProgress by calling getPrevious() and simply subtract it from the current value.

The resulting diff tells us the current scroll direction.

We're using 1 and -1 here to represent scrolling down and up, respectively.

const [scrollDirection, setScrollDirection] = useState(1)
 
useMotionValueEvent(scrollYProgress, 'change', (current) => {
  const prev = scrollYProgress.getPrevious()
  if (!prev) return
  // Check the diff between current and previous scroll to get direction.
  setScrollDirection(current - prev > 0 ? 1 : -1)
})

Compose a Hook

We can also build a hook to simplify getting scroll progress and direction in any component that needs it.

// hooks/useScrollDirection.ts
export default function useScrollDirection() {
  const { scrollYProgress } = useScroll()
  const [scrollDirection, setScrollDirection] = useState(1)
 
  useMotionValueEvent(scrollYProgress, 'change', (current) => {
    const prev = scrollYProgress.getPrevious()
    if (!prev) return
    // Check the diff between current and previous scroll to get direction.
    setScrollDirection(current - prev > 0 ? 1 : -1)
  })
 
  return { scrollDirection, scrollYProgress }
}

Now we can access our scrollDirection state as well as the scrollYProgress motion value from any component in just one line.

// Inside any client component...
const { scrollDirection, scrollYProgress } = useScrollDirection()

Okay, we're finished ✨

Happy Animating

The interactive component showing in this post is a quick demo to illustrate building some UI based on the code above.

Motion also provides some great examples for inspiration.

Thanks for reading!