motiondivision / motiondivision/motion

`useScroll` with `"start"/"end"` string offsets broken with `position: sticky` inside transformed parent since 12.37.0

Open
#3,658 1 comment 1 reaction 0 assignees View on GitHub

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

  1. Wrap a useScroll + position: sticky scroll-reveal component inside a motion.div that applies a scale transform
  2. Use offset: ['start start', 'end end'] on the inner useScroll
  3. Scroll to the section
  4. 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.0 and later (tested up to 12.38.0)
  • Breaking change: "Support for hardware accelerating "start" and "end" offsets in scroll and useScroll" (12.37.0 changelog)
  • OS: Linux
  • Browser: Chrome (latest)
  • React: 19.1.0
  • Next.js: 16.2.0

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.