LearnNewsExamplesServices
Frontmatter
id8916
titleImplement Kinetic/Momentum Scrolling in GridDragScroll
stateClosed
labels
enhancementdeveloper-experienceaiperformance
assigneestobiu
createdAtJan 30, 2026, 2:25 PM
updatedAtJan 30, 2026, 2:55 PM
githubUrlhttps://github.com/neomjs/neo/issues/8916
authortobiu
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 30, 2026, 2:55 PM

Implement Kinetic/Momentum Scrolling in GridDragScroll

Closed v11.24.0 enhancementdeveloper-experienceaiperformance
tobiu
tobiu commented on Jan 30, 2026, 2:25 PM

Problem: By consolidating touch scrolling into GridDragScroll and using preventDefault() on touchmove events, we have effectively disabled the browser's native momentum (inertial) scrolling. This results in a "dead" feel where the scroll stops instantly upon release, which is jarring for mobile users and sub-optimal for desktop "throw" interactions.

Solution: Implement kinetic scrolling physics within the Neo.main.addon.GridDragScroll addon.

Requirements:

  1. Velocity Tracking: Calculate the velocity (pixels/ms) of the drag gesture based on the last few movement events.
  2. Decay Animation: Upon onDragEnd, if the velocity exceeds a threshold, initiate a requestAnimationFrame loop that continues to scroll the grid.
  3. Friction: Apply a friction factor to the velocity in each frame to gradually slow it down until it stops.
  4. Bounce/Boundary: (Optional but good) Handle hitting the scroll limits gracefully.
  5. Interruption: Ensure that a new mousedown or touchstart instantly stops any active kinetic animation.

Benefits:

  • Restores the expected "native" feel on mobile devices.
  • Provides a premium, smooth scrolling experience on desktop (mouse throw).
  • Maintains the zero-latency architecture while adding polish.
tobiu added the enhancement label on Jan 30, 2026, 2:25 PM
tobiu added the developer-experience label on Jan 30, 2026, 2:25 PM
tobiu added the ai label on Jan 30, 2026, 2:25 PM
tobiu added the performance label on Jan 30, 2026, 2:25 PM
tobiu referenced in commit 9db8eb4 - "feat: Implement Kinetic/Momentum Scrolling in GridDragScroll (#8916)" on Jan 30, 2026, 2:52 PM
tobiu assigned to @tobiu on Jan 30, 2026, 2:54 PM
tobiu
tobiu Jan 30, 2026, 2:55 PM

Input from Gemini 3 Pro:

✦ I have successfully implemented kinetic (momentum) scrolling in the GridDragScroll addon.

Implementation Details

1. Kinetic Engine (autoScroll):

  • Decay Animation: Implemented a requestAnimationFrame loop that continues scrolling after the user releases the drag.
  • Friction: Applies an exponential decay factor of 0.95 per frame to simulate friction.
  • Threshold: The animation stops automatically when velocity drops below 0.1 pixels/frame.

2. Velocity Tracking:

  • History Buffer: onDragMove maintains a rolling history of the last 10 drag events (timestamp and position).
  • Calculation: onDragEnd calculates the release velocity based on the last 100ms of movement data, ensuring the "throw" feels responsive to the user's final gesture.

3. UX Enhancements:

  • Cursor Feedback: Sets cursor: grabbing !important on document.body during mouse drag operations to provide clear visual feedback.
  • Interruption: Any new mousedown or touchstart event instantly cancels an active kinetic animation, allowing the user to "catch" and stop the scroll.

Outcome: The grid now supports smooth, physics-based scrolling on both desktop (mouse throw) and mobile (touch momentum), matching the native feel while running entirely on the Main Thread.

tobiu closed this issue on Jan 30, 2026, 2:55 PM