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

Melt of the Day: Brisket, Muenster, & Grilled Onions

2 min read

You can't go wrong with brisket. This recipe uses Snow's BBQ, Texas Monthly's #1 Pick, and grilled onions for the perfect brisket and grilled cheese melt.

Lessons Learned in Freelancing

12 min read

If you want to become a freelance web developer, these are the lessons that will help you have a great time working with clients and being effective.

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.