Framer Motion useViewportScroll 100% height parallax bug

Cole Turner
Cole Turner
2 min read
Cole Turner
Framer Motion useViewportScroll 100% height parallax bug
Blog
 
LIKE
 
LOVE
 
WOW
 
LOL

Framer motion has a great method (useViewportScroll) for creating a parallax scrolling effect. If you want to use framer motion to create a parallax effect, here's how you would do that:

export const MyComponent = () => {
  const { scrollYProgress } = useViewportScroll()
  return <motion.div style={{ scaleX: scrollYProgress }} />
}

But what if scrollYProgress isn't changing?

I ran into an issue where my component was not updating when trying to use framer-motion for a parallax effect. After debugging framer-motion, I found that it was not updating the scrollYProgress value because "maxYOffset" was set to 0. This special parameter is derived by framer-motion, using the following calculation:

document.body.clientHeight - window.innerHeight

Weird, I thought. My document is _definitely_ scrolling. When I checked document.body.scrollHeight, it looked fine. But why was document.body.clientHeight less than document.body.scrollHeight, especially if scrolling is what I care about?

It turns out it was unhappy with my method for forcing the HTML/CSS to take up 100% of the screen.

html,
body {
  height: 100%;
  min-height: 100%;
}

In this case, height: 100% is limiting the height of the body element. Visually speaking, it works as expected. But the DOM isn't happy when doing this.

Open your browser console and check the following:

document.body.clientHeight - window.innerHeight <= 0

If this equals true, then your body element is getting cut off and framer-motion is ignoring the updates. That will explain why maxYOffset is set to 0, and why scrollYProgress would not be updating. Once that is fixed, your parallax scroll should be working, buttery smooth.

 
LIKE
 
LOVE
 
WOW
 
LOL

More Stories

Why I Don't Like Take-Home Challenges

4 min read

If you want to work in tech, there's a chance you will encounter a take-home challenge at some point in your career. A take-home challenge is a project that you will build in your free time. In this post, I explain why I don't like take-home challenges.

Standing Out LOUDER in the Technical Interview

5 min read

If you want to stand out in the technical interview, you need to demonstrate not only your technical skills but also your communication and collaboration skills. You need to think LOUDER.

See more posts

Read it before anyone else. Subscribe to my newsletter for early access to the latest news in software engineering, web development, and more.