Weird motionValue bounce effect in Next.js 13

[Sreejit7]

Hi everyone, I'm using framer-motion in a Next.js 13 project (just playing around with the features & APIs)

I'm trying to animate the height of the header based on scrolling using MotionValue and useScroll like so:

  const { scrollY } = useScroll({ container: contentRef });

  const headerHeightMax = 100;
  const headerHeightMin = 50;
  const headerHeight = useMotionValue(headerHeightMax);
  
  useMotionValueEvent(scrollY, "change", (current) => {
    const diff = current - scrollY.getPrevious();

   // Shrink/grow header based on scroll direction
    if (diff > 0) {
      headerHeight.set(Math.max(headerHeight.get() - diff, headerHeightMin));
    } else {
      headerHeight.set(Math.min(headerHeight.get() - diff, headerHeightMax));
    }
  });

With this, I'm rendering the header like this:

     <div ref={contentRef}>
        {/* Header */}
        <motion.header
          initial={false}
          style={{
            height: headerHeight,
            backdropFilter: headerBackdropFilter,
            background: headerBGColour,
          }}
        >
        {/* Header content */}
        </motion.header>
        
        {/* Page content */}
     </div>

But when I'm scrolling and stop somewhere, I get this kinda bounce effect in the header's height (you can also see the header's height jumping b/w values in the elements):

Screen.Recording.2023-01-22.at.8.56.16.PM.mov

What am I missing or doing wrong here? please help 🙏🏼

[tspander]

The problem is that your header is sticky. As soon as your header shrinks, your scroll position is decreased (since you are closer to the top of the page now that the first element is smaller), making your header go back up in size, which pushes you back down on the page. Consider using a fixed position header instead (with padding on the page to compensate for the initial header height).

[Sreejit7]

Hey, thanks for catching that! So silly of me, now it works fine with fixed positioning.