perf: optimise trackpad/mousepad scrolling with Lenis#35
perf: optimise trackpad/mousepad scrolling with Lenis#35prdai merged 3 commits intoBitByBit-B3:mainfrom
Conversation
- Wrap usePinScale and useHScroll scroll callbacks in requestAnimationFrame so DOM reads/writes happen once per frame even during trackpad momentum bursts (prevents layout-thrashing on high-frequency scroll events) - Cache `total` and `maxTx` on mount; update via a passive resize listener instead of recalculating on every scroll tick - Guard against zero-total edge case (avoids NaN transform values) - Move `scroll-behavior: smooth` under prefers-reduced-motion media query so native trackpad inertia is no longer double-smoothed by CSS
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (4)
WalkthroughTwo animation hooks ( ChangesScroll Animation Performance Optimization
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request optimizes scroll-based animations in use-b3-animations.ts by introducing requestAnimationFrame for throttling and adding resize listeners to maintain accurate scroll boundaries. Additionally, it enhances accessibility by restricting smooth scrolling to users who haven't enabled reduced motion settings. Feedback focuses on ensuring the UI remains synchronized during window resizing by triggering scroll updates immediately and clamping scroll translation values to avoid layout issues.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/hooks/use-b3-animations.ts`:
- Around line 37-45: The scroll-driven scale/scroll effects in usePinScale (the
requestAnimationFrame block that sets content.style.transform/opacity and
manages rafId) and the similar logic in useHScroll must be skipped when the user
prefers reduced motion: detect window.matchMedia('(prefers-reduced-motion:
reduce)').matches at the start of each effect and bail out (return) before
registering any event listeners or requestAnimationFrame; also ensure any
existing rafId is cancelled in cleanup. Update both hooks to gate their effect
setup on this media-query check so transforms/RAF are not used for users who
opted out of motion.
- Around line 43-44: The opacity "1" is being written to content.style on every
RAF frame inside the scroll/rAF handler in useB3Animations, which can stomp
entry animations; move the line that sets content.style.opacity = "1" out of the
RAF/scroll callback and run it once during effect setup (e.g., in the hook’s
initialization where you obtain content) or remove it entirely if the element
should start visible, ensuring only the transform/scale updates remain inside
the rAF handler.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: f71d3798-f6de-48ab-9293-62249c9fbc86
📒 Files selected for processing (2)
src/hooks/use-b3-animations.tssrc/styles/global.css
Install lenis ^1.1.14 and wire up a simple requestAnimationFrame loop in the root Astro layout — same pattern used in the portfolio site's smooth-scroll.tsx (minus the Framer Motion frame.update sync since Framer isn't present here). Lenis intercepts wheel/trackpad events and eases them with a consistent lerp curve, replacing the browser's variable per-platform momentum with predictable smooth deceleration. The .lenis CSS resets prevent the lenis-smooth class from fighting scroll-behavior: smooth on anchor nav.
Thanukamax
changed the title
- Gate both usePinScale and useHScroll behind prefers-reduced-motion check so scroll-driven transforms don't fire for users who opted out - Move content.style.opacity = "1" outside the rAF to a one-time setup call so it can't stomp entry animations driven by useB3Observe - Call onScroll() inside onResize() so visual state syncs immediately after a viewport resize (not deferred until next scroll event) - Clamp maxTx to Math.max(0, ...) so narrow viewports where track is smaller than the viewport don't produce a negative translation
2 participants
Problem
Two symptoms on trackpads / precision touchpads:
Jank during momentum scrolling —
usePinScaleanduseHScrollfired a scroll callback on every scroll event. During trackpad momentum the browser can dispatch 3–5 events per animation frame, each callinggetBoundingClientRect()and writing a newtransform. Repeated forced-layout + paint per frame → visible stutter.No consistent scroll easing — without a smooth-scroll library, each OS/browser combination applies its own trackpad momentum curve, causing the pin-scale and horizontal-scroll sections to feel different (or sluggish) across platforms.
Double-smoothing on anchor navigation —
html { scroll-behavior: smooth }was unconditional. Trackpads already supply native inertia; CSS smooth-scroll on top creates a rubber-band / over-animated feel.Changes
package.jsonlenis ^1.1.14— same version used in the portfolio site (thanukamax.github.io).src/layouts/Layout.astrorequestAnimationFrameloop andsmoothWheel: true. Lenis intercepts wheel/trackpad events and replaces the browser's variable per-platform momentum with a consistent lerp easing curve. Since this repo doesn't use Framer Motion (unlike the portfolio'sframe.updatesync), Lenis manages its own RAF loop.src/styles/global.css.lenis.lenis-smooth { scroll-behavior: auto }etc.) so Lenis doesn't fight CSS smooth-scroll on anchor nav.html { scroll-behavior: smooth }inside@media (prefers-reduced-motion: no-preference)— also satisfies the accessibility requirement.src/hooks/use-b3-animations.tsusePinScaleanduseHScrollscroll callbacks in arequestAnimationFrameguard so DOM reads/writes happen at most once per frame.total/maxTxon mount; a passiveresizelistener keeps them fresh instead of recalculating every tick.total === 0to avoid NaN transforms on edge-case layouts.Test plan
prefers-reduced-motion: reduce→scroll-behaviorshould beauto🤖 Generated with Claude Code