-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels