motiondivision / motiondivision/motion

[BUG] useScroll - Can't track element position when horizontally scrolled container

Open
#2,546 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
33.7k
Forks
1.4k
Avg merge
1d 10h
Merged PRs (30d)
14

Description

1. Read the FAQs 👇

2. Describe the bug

When trying to track the position of an element inside a horizontally scrolled container it doesn't give the proper element value, instead it gives the progress for the container scroll progress.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Forked directly from the sandbox provided here, which works with the same code as below sandbox, except below is horizontal instead of vertical.

https://codesandbox.io/p/sandbox/framer-motion-track-element-position-forked-xph5yn

4. Steps to reproduce

Open the Sandbox and scroll horizontally. Note that the progress-bars are filled but based on the container scroll progress, not the local target progress value.

5. Expected behavior

Elements being tracked for X-axis scroll should be possible just like Y-axis

6. Video or screenshots

N/A

7. Environment details

Tested in Chromium 122

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and inspect the useScroll entry point responsible for horizontal tracking, comparing its behavior with the working vertical case described in the issue. Done means horizontally tracked elements report their local target progress rather than the container's scroll progress.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.