Skip to content

Fix scroll progress negative in reverse directions#3583

Merged
mattgperry merged 1 commit intomainfrom
worktree-fix-issue-3340
Mar 4, 2026
Merged

Fix scroll progress negative in reverse directions#3583
mattgperry merged 1 commit intomainfrom
worktree-fix-issue-3340

Conversation

@mattgperry
Copy link
Collaborator

Summary

  • Fixes scroll progress returning negative values when using containers with flex-direction: column-reverse, flex-direction: row-reverse, or writing-mode: vertical-rl
  • Root cause: browsers report negative scrollLeft/scrollTop for reverse-direction containers, but the progress calculation assumed non-negative values
  • Fix: apply Math.abs() to the raw scroll position in updateAxisInfo so progress is always in the 0–1 range

Test plan

  • Added unit test for negative scrollTop (y-axis, simulating column-reverse)
  • Added unit test for negative scrollLeft (x-axis, simulating row-reverse / vertical-rl)
  • All existing scroll tests still pass
  • Full build passes

Fixes #3340

🤖 Generated with Claude Code

Use Math.abs() on scroll position to handle containers with
column-reverse, row-reverse, or writing-mode: vertical-rl where
browsers report negative scrollLeft/scrollTop values.

Fixes #3340

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@greptile-apps
Copy link

greptile-apps bot commented Mar 3, 2026

Greptile Summary

Clean fix for scroll progress returning negative values in reverse-direction containers (flex-direction: column-reverse/row-reverse, writing-mode: vertical-rl). The single-line change applies Math.abs() to scroll positions before calculation, ensuring progress stays in 0-1 range.

  • Applied Math.abs() to scrollTop/scrollLeft in updateAxisInfo (info.ts:49)
  • Added two comprehensive unit tests covering negative y-axis and x-axis scroll values
  • Fix is minimal, focused, and well-tested
  • Velocity calculation remains consistent since it operates on the already-normalized axis.current values
  • All existing tests pass

Confidence Score: 5/5

  • Safe to merge with no concerns
  • One-line implementation fix with comprehensive test coverage that directly addresses the reported issue. The change is minimal, well-contained, and all existing tests pass. No edge cases or side effects identified.
  • No files require special attention

Important Files Changed

Filename Overview
packages/framer-motion/src/render/dom/scroll/info.ts Applied Math.abs() to scroll position on line 49 to handle negative values from reverse-direction containers, ensuring progress calculation stays in 0-1 range
packages/framer-motion/src/render/dom/scroll/tests/index.test.ts Added comprehensive tests for negative scrollTop (y-axis) and negative scrollLeft (x-axis) to verify the fix handles reverse-direction containers correctly

Last reviewed commit: abaf16e

@mattgperry mattgperry merged commit 7e783fb into main Mar 4, 2026
5 of 6 checks passed
@mattgperry mattgperry deleted the worktree-fix-issue-3340 branch March 4, 2026 13:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] scroll progress is negative in reverse directions

1 participant