Skip to content

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

@PanagiotisKaraliolios

Description

@PanagiotisKaraliolios

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions