feat(home): add Lenis smooth scroll to homepage [INTORG-734]#308
Open
Infi-Knight wants to merge 1 commit into
Open
feat(home): add Lenis smooth scroll to homepage [INTORG-734]#308Infi-Knight wants to merge 1 commit into
Infi-Knight wants to merge 1 commit into
Conversation
Mirrors the Framer prototype's Smooth Scroll component (Lenis with duration: 0.9). Scoped to the homepage via a <SmoothScroll /> loader so docs, blog, and other routes keep native scroll. Bails when the user has prefers-reduced-motion: reduce and re-engages if the preference changes at runtime. Anchor-link clicks are intercepted and offset by the target's scroll-margin-top, falling back to the sticky header height.
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
✅ Deploy Preview for interledger-org-v5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
2 participants
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.
Summary
Adds wheel/trackpad smooth scrolling to the homepage via Lenis, mirroring the Framer prototype at inspirational-lottery-436833.framer.app. Scoped to the homepage only via a
<SmoothScroll />loader component — docs, blog, and other routes keep native scroll.Implementation choices:
duration: 0.9(everything else default). Pulled from the Framer prototype's compiled bundle — its Smooth Scroll component usesnew Lenis({ duration: intensity/10 })and the prototype setsintensity: 9. Scroll-curve A/B against the live prototype settles to the same final position at the same time (~900ms, easeOutExpo).prefers-reduced-motion: reducematches, anddestroy()s if the preference flips at runtime. Lenis does not honor this preference by default.a[href*="#"]clicks are intercepted and scrolled vialenis.scrollTo, with the offset read from the target'sscroll-margin-top, falling back to.foundation-header.offsetHeightso sticky-header overlap is avoided.overflow: autoelements withdata-lenis-preventso they keep native scroll — same approach the Framer component takes.@layer baseinreset.css. They're inert unless<html>has thelenisclass.Related Issue
Fixes INTORG-734
Manual Test
prefers-reduced-motion: reduce→ reload.<html>should not have thelenisclass; scrolling should be native/instant./about-us,/blog, or any docs page — scroll should be native (Lenis only loads on the homepage).syncTouchdefault offalse).Checks
pnpm run formatpnpm run lintPR Checklist