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: sticky scroll-reveal component inside a motion.div that applies a scale transform
- Use
offset: ['start start', 'end end'] on the inner useScroll
- 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.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
Describe the bug
Since
12.37.0("Support for hardware accelerating"start"and"end"offsets inscrollanduseScroll"),useScrollwith string offsets like['start start', 'end end']no longer works correctly when the target element contains aposition: stickychild and is nested inside a parentmotion.divwith ascaletransform.The scroll progress starts at a non-zero value (content is already partially revealed on entry) and doesn't reach
1.0before the section scrolls out of view (the reveal animation never completes).CodeSandbox reproduction
https://codesandbox.io/p/sandbox/5nflw4
Steps to reproduce
useScroll+position: stickyscroll-reveal component inside amotion.divthat applies ascaletransformoffset: ['start start', 'end end']on the inneruseScrollExpected behavior
scrollYProgressshould range from0to1across the full scroll distance of the target element, regardless of CSS transforms on ancestor elements. This worked correctly in12.36.0and earlier.Environment details
motion@12.36.0/framer-motion@12.36.0motion@12.37.0/framer-motion@12.37.0and later (tested up to12.38.0)"start"and"end"offsets inscrollanduseScroll" (12.37.0 changelog)