Repository navigation
docs(react): keep the custom animation frame loop running - #559
Open
dajiaohuang wants to merge 1 commit into
Open
dajiaohuang wants to merge 1 commit into
dajiaohuang wants to merge 1 commit into
Conversation
|
@dajiaohuang is attempting to deploy a commit to the Darkroom Team on Vercel. A member of the Team first needs to authorize it. |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
The React README's custom
requestAnimationFrameexample schedulesupdateonly once, while explicitly settingoptions.autoRaftofalse. After that first frame, wheel input starts a Lenis animation but nothing advances it, so the page does not scroll.Schedule the next frame inside
update, and retain the latest request ID so the existing effect cleanup cancels the pending frame on unmount. This changes only the example; no library behavior changes.No companion issue: this is a small, directly reproducible documentation fix. Existing #410 addressed disabling the automatic loop, rather than keeping the custom loop running.
How to verify
Copy the example into a React app, import the recommended Lenis CSS, and add a long article below it. Once mounted, scroll with the mouse wheel, then unmount the component.
Tested with React 19.2.4 and real Chromium 151.0.7922.34 through Playwright on an isolated loopback miniapp, bundling the documented App with the local Lenis build:
window.scrollYat 0 andisScrollingatsmooth.window.scrollY === 500, emits scrolling callbacks, and settles withisScrolling === false.scrollTocompletion, stop/start/destroy, nested native scrolling, horizontal container scrolling, anchors, and live reduced motion.bun install --frozen-lockfile --ignore-scriptsandbun run buildpassed (including generated declarations). Dependency install scripts were not run. Standalonetsc --noEmitis not green on the unchanged base: unresolved self-packagelenisimports and Nuxt#imports; this documentation change does not alter those paths.Checklist