Comments (8)
Hello @joshuaedo thanks for the detailed explanation.
first, what is the version of Lenis you're using?
also, have you checked react-lenis?
one more thing, can you share the component?
last, as i was reviewing the structure, i see you are closing a context provider </HeaderProvider>
but i don't see where that is opened, same for the component.
from lenis.
Lenis Version
"@studio-freight/lenis": "^1.0.16",
HeaderContext.jsx
import { createContext, useState } from "react";
export const HeaderContext = createContext();
export function HeaderProvider({ children }) {
const [isActive, setIsActive] = useState(false);
const [show, handleShow] = useState(false);
return (
<HeaderContext.Provider value={{ isActive, setIsActive, show, handleShow }}>
{children}
</HeaderContext.Provider>
);
}
Notes
- Yes, I have tried react-lenis and locomotive-scroll@beta and I had the same issue; since they're both built on Lenis, I figured the bug was probably from my code.
- I'm not sure which component you're referring to unless you mean
</HeaderProvider>
. - I had this issue before I integrated
</HeaderProvider>
. - The repo is public (incase you have the time to go through it).
from lenis.
last, as i was reviewing the structure, i see you are closing a context provider but i don't see where that is opened, same for the component.
I made mistake while copy-pasting in the original comment.
Here's the full file
import { useState } from "react";
import Header from "./components/header";
import { BrowserRouter } from "react-router-dom";
import Cursor from "./components/cursor/Cursor.jsx";
import Footer from "./components/footer/Footer.jsx";
import Navbar from "./components/navbar/Navbar.jsx";
import { Router } from "./components/router/Router.jsx";
import { HomeLoader } from "./components/loader/Loading.jsx";
import { HeaderProvider } from "./contexts/HeaderContext.jsx";
import MobileNavbar from "./components/mobile-navbar/MobileNavbar.jsx";
import { ScrollToTop } from "./components/smooth-scroll/ScrollToTop.jsx";
// import LenisScroller from "./components/smooth-scroll/LenisScroller.jsx";
// import LocomotiveScroller from "./components/smooth-scroll/LocomotiveScroller.jsx";
export function App() {
const [loading, setLoading] = useState(true);
{
setTimeout(() => {
setLoading(false);
}, 4900);
}
return (
<BrowserRouter>
<div className="bg-black tracking-wider text-white">
{loading ? (
<>
<HomeLoader />
</>
) : (
<>
<HeaderProvider>
{/* <LenisScroller> */}
{/* <LocomotiveScroller> */}
<ScrollToTop>
<Header />
<Navbar />
<MobileNavbar />
<Cursor />
<Router />
<Footer />
</ScrollToTop>
{/* </LocomotiveScroller> */}
{/* </LenisScroller> */}
</HeaderProvider>
</>
)}
</div>
</BrowserRouter>
);
}
from lenis.
I've cloned your repo locally and tested using react-lenis and it's working fine, can you please provide more information like the browser you're using and screen resolution?
steps i did to test:
npm i @studio-freight/react-lenis
then in App.jsx i added:
import { ReactLenis } from "@studio-freight/react-lenis"
return (
<BrowserRouter>
<div className="bg-black tracking-wider text-white">
{loading ? (
<>
<HomeLoader />
</>
) : (
<>
[...]
<ReactLenis root>
<HeaderProvider>
[...]
</HeaderProvider>
</ReactLenis>
[...]
</>
)}
</div>
</BrowserRouter>
);
}
from lenis.
- I just tried this again, same result.
- Google Chrome and 1366 x 768.
- Did you scroll all the way down on the first two pages you navigated to?
from lenis.
@arzafran any luck?
from lenis.
@joshuaedo provide a codesandbox
from lenis.
i'm closing this issue because lack of activity
from lenis.
Related Issues (20)
- Smooth is not defined HOT 3
- Problems with latest version 1.0.22 HOT 2
- Issue with Finsweet TOC attributes in Webflow HOT 3
- Error with Lenis constructor types in Typescript HOT 1
- scroll in other dialogs trigger lenis HOT 2
- nested scroll HOT 1
- lag when using position sticky (pin property in GSAP) HOT 3
- gestureOrientation: 'both' blocks click event on mobile HOT 1
- JS events not working on scroll HOT 2
- Optionally disable smooth scrolling on trackpads HOT 3
- Disable lenis on html elements programmatically (alternative to data-lenis-prevent) HOT 4
- [QUESTION] GSAP ScrollTrigger integration still required? HOT 4
- Setting velocity does not seem to have any effect HOT 2
- Lenis is lagging with GSAP in Nextjv13 Page Router HOT 3
- Lenis conflict with WebGl canvas and .lenis-scrolling class is present on html tag HOT 1
- Horizontal instance nested within vertical root instance - parent's vertical scroll not respected
- smoothWheel's default value is `true` and not `false` as stated in the README HOT 1
- Smooth nested scroll HOT 5
- Smooth Scrolling Issue with `content` and `wrapper` in iOS Safari HOT 3
- scrollTo sometimes produces -1px offset on top when given HTMLElement as target HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lenis.