motiondivision / motiondivision/motion
`useScroll` with `"start"/"end"` string offsets broken with `position: sticky` inside transformed parent since 12.37.0
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
Describe the bug
Since 12.37.0 ("Support for hardware accelerating "start" and "end" offsets in scroll and useScroll"), useScroll with string offsets like ['start start', 'end end'] no longer works correctly when the target element contains a position: sticky child and is nested inside a parent motion.div with a scale transform.
The scroll progress starts at a non-zero value (content is already partially revealed on entry) and doesn't reach 1.0 before the section scrolls out of view (the reveal animation never completes).
CodeSandbox reproduction
https://codesandbox.io/p/sandbox/5nflw4
Steps to reproduce
- Wrap a
useScroll+position: stickyscroll-reveal component inside amotion.divthat applies ascaletransform - Use
offset: ['start start', 'end end']on the inneruseScroll - Scroll to the section
- Observe: content is already partially revealed on entry, and the animation doesn't complete before scrolling past
Expected behavior
scrollYProgress should range from 0 to 1 across the full scroll distance of the target element, regardless of CSS transforms on ancestor elements. This worked correctly in 12.36.0 and earlier.
Environment details
- Works:
motion@12.36.0/framer-motion@12.36.0 - Breaks:
motion@12.37.0/framer-motion@12.37.0and later (tested up to12.38.0) - Breaking change: "Support for hardware accelerating
"start"and"end"offsets inscrollanduseScroll" (12.37.0 changelog) - OS: Linux
- Browser: Chrome (latest)
- React: 19.1.0
- Next.js: 16.2.0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the useScroll offset handling between motion 12.36.0 and 12.37.0, then reproduce the CodeSandbox case with a scaled motion.div parent and a position: sticky child. Verify the fix against the reported setup: scrollYProgress should begin at 0 and reach 1 before the section leaves view, including with ['start start', 'end end'].
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100