[BUG] Jumpy Scrolling

[boar-is]

1. Read the FAQs 👇 ✅

2. Describe the bug

When animations depends on a scroll progress, scrolling with a mouse makes it jumpy sometimes (scrolling with a scrollbar is fine).

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-iuqre4?file=app%2Fpage.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open the reproduction
2. Scroll the page with the mouse up&down
3. Sometimes you should see jumps

5. Expected behavior

No jumps

6. Video or screenshots

https://github.com/framer/motion/assets/31354262/80f1e1f7-77a5-4513-a1da-c1034cb545b4

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.

Framer Motion 11.2.11, Windows 11, Chrome Version 126.0.6478.127 (Official Build) (64-bit)

[wuebkers]

Having the same issue. Were you able to find a solution?

[boar-is]

I found out that it's somehow correlated with Chrome behavior (try to reproduce it without Framer Motion). I decided to go with sticky with height: 0px and overflow: visible hack. So the container is not scrolled. Therefore, there are no jumps. Less versatile solution, but it works. Don't have much time to provide a solution, sorry.

[mccallofthewild]

@boar-is @wuebkers wrap your scroll value in a spring.

const scrollMotionSpring = useSpring(scrollMotionValue, {
    stiffness: 100,
    bounce: 0,
    mass: 0.1,
    duration: 0.25,
  });

[clementroche]

Hey! This is a pretty common issue when dealing with scroll-synced animations, especially on iOS. It actually happens on desktop too, but it’s much less noticeable there.

The root cause is that scrolling and JavaScript run on separate threads for performance reasons. On iOS in particular, Safari tends to “over-optimize” scrolling, which makes it impossible to perfectly synchronize DOM updates with scroll events using JavaScript alone.

That’s exactly why Lenis was created in the first place. It helps solve this issue — and others — by providing smoother, JS-driven scroll behavior. Specifically, the syncTouch option in Lenis overrides the native touch scroll and emulates it while keeping the scroll and JS threads in sync.

https://github.com/darkroomengineering/lenis