antoinelin / react-locomotive-scroll Goto Github PK
View Code? Open in Web Editor NEWA locomotive-scroll React wrapper
License: MIT License
A locomotive-scroll React wrapper
License: MIT License
Howdy 👋
I haven't dived very deep into this package, and it seems to work flawlessly for me so far.
But looking at the code, I think that implementing a debounce on the height
observer would be a nice performance boost.
Most of the components impacting the height of the container will have some sort of transition, so duration and easing.
This mean's that the scroll.update()
is triggered a bunch of times while the transition happens.
You can think of collapsible components for instance.
Thanks.
Hiya,
Thank you for making this library, we (Phantom) are using it on a project in production now for over a year. It's been great, but since the latest Firefox version, we're getting some unexpected behaviour. If you open up a project using Firefox v105 with the latest (V0.2.2) react-locomotive-scroll
, you'll see that there's a Typescript error saying: transform is undefined
.
In production this results in no scroll once you navigate on a next.js app, but if you run a development build, you see it straight away.
I'm not sure if it's just a Typescript issue, since it's only happening on Firefox. I don't think Locomotive-scroll or react-locomotive-scroll have changed much recently, so it must be a Firefox issue? 🤔 Happy to discuss!
I know you're looking for contributors, I'm happy to assist you on this as well. If you'd be able to brief me a little bit on the library and how it's built.
Thanks!
Emiel
I'd like to use scroll.on('scroll', doSomething)
.
I tried like below but it doesn't work.
const {scroll} = useLocomotiveScroll();
useEffect(() => {
scroll.on('scroll', () => console.log('test'));
}, [scroll])
How can I use it?
Hey there,
I reached out to you on Twitter @toinelin, but an Issue definitely seems to be more fitting. I'm currently implementing the project in a Next.js website that uses server-side data to render conditional page sections.
For example, using WordPress with Advanced Custom Fields I map through the Flexible Content specified in my ACF data to render page sections as they are returned from gql.
I've done this with two projects, my personal site, and the one I'm currently working on.
My personal site is using the same structure, where _app.tsx
utilizes LocomotiveScrollProvider
to wrap all pages in the provider, e.g.
function MyApp({ Component, pageProps }: AppProps) {
const containerRef = useRef(null);
const { route } = useRouter();
return (
<ApolloProvider client={client}>
<Provider store={store}>
<LocomotiveScrollProvider
options={{ smooth: true }}
watch={[route]}
containerRef={containerRef}>
<BaseCSS />
<main data-scroll-container className="container">
<Component {...pageProps} />
</main>
</LocomotiveScrollProvider>
</Provider>
</ApolloProvider>
);
}
The odd behavior that I'm seeing, however, is shown in the attached image.
You'll see that for some reason there are two scrollbars. Additionally, there seem to be two Scrolls in context. Utilizing const {scroll} = useLocomotiveScroll()
provides me with the scroll context, and calling the .stop()
method on it stops only one of the scrolls.
The real question here is why am I getting two scrolls? It's creating extremely strange behavior as you might expect.
react-locomotive-scroll: the context is missing. You may be using the hook without registering LocomotiveScrollProvider, or you may be using the hook in a component which is not wrapped by LocomotiveScrollProvider.
I get the message above in the console whilst using this in a Next JS project. It seems to work but I get a lot of these console warnings.
The fact it works and I have actually got them wrapped its not a major issue but has anybody got the same issue?
i have some issues i cannot seem to wrap my head arround.
I would really like to use locomotivescroll but I am getting all sorts of weird whitespace etc ..
I think the issue lies with lazyloading images and components..
I already update the scroll after the lazyload has happened but when I switch pages in my gatsby app with page transitions ( react-transition-group
) AND also without transitions.. I get all sorts of lengths of whitespace at the bottom...
<LazyLoadImage
effect="opacity"
src={page.about.picture.sourceUrl}
srcSet={page.about.picture.srcSet}
afterLoad={() => scroll.update()}
/>
The plugin is not letting me use react 17.0.2
This bug seems to be persistent. When I go to another page that I scroll down a bit and click the button to go back, the page keeps the position of the old page, even when using scrollTo(0, ...);
This bug is similar to the issue #9
Hey,
I tried setting the property data-scroll-section
in the inner section instead of setting it in the page wrapper. But it throws an error.
I wanted to try splitting it by section as per the locomotive-scroll documentation which says it could potentially improve performance.
When I try to zoom in and zoom out the page using mouse wheel and Ctrl key, page zoom is working, but it also scrolls the page.
Is it possible to update this to support react 18?
By following the documentation provided by locomotive scroll
This code results with the following error:
<div className={`c-section -fixed`} data-scroll-section data-persistent>
<div className="c-fixed_wrapper" data-scroll data-scroll-repeat>
<div className="c-fixed_target" id="fixed-target"></div>
<div className="c-fixed" data-scroll data-scroll-sticky data-scroll-target="#fixed-target">
{/*
// @ts-ignore */}
<div onScroll={onScroll}>
Content goes here
</div>
</div>
</div>
</div>
Error:
Unhandled Runtime Error
Error: react-locomotive-scroll: TypeError: section is undefined
Call Stack
LocomotiveScrollProvider/</</<
node_modules\react-locomotive-scroll\module\LocomotiveScroll.context.js (34:0)
fulfilled
node_modules\tslib\tslib.es6.js (71:42)
promise callback*step
node_modules\tslib\tslib.es6.js (73:32)
__awaiter/<
node_modules\tslib\tslib.es6.js (74:0)
__awaiter
node_modules\tslib\tslib.es6.js (70:0)
LocomotiveScrollProvider/</<
node_modules\react-locomotive-scroll\module\LocomotiveScroll.context.js (23:0)
LocomotiveScrollProvider/<
node_modules\react-locomotive-scroll\module\LocomotiveScroll.context.js (36:9)
commitHookEffectListMount
node_modules\react-dom\cjs\react-dom.development.js (23150:0)
commitPassiveMountOnFiber
node_modules\react-dom\cjs\react-dom.development.js (24926:0)
commitPassiveMountEffects_complete
node_modules\react-dom\cjs\react-dom.development.js (24891:0)
commitPassiveMountEffects_begin
node_modules\react-dom\cjs\react-dom.development.js (24878:0)
commitPassiveMountEffects
node_modules\react-dom\cjs\react-dom.development.js (24866:0)
flushPassiveEffectsImpl
node_modules\react-dom\cjs\react-dom.development.js (27039:0)
flushPassiveEffects
node_modules\react-dom\cjs\react-dom.development.js (26984:0)
commitRootImpl/<
node_modules\react-dom\cjs\react-dom.development.js (26769:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)
EventHandlerNonNull*
node_modules\scheduler\cjs\scheduler.development.js (571:0)
<unknown>
node_modules\scheduler\cjs\scheduler.development.js (633:3)
./node_modules/scheduler/cjs/scheduler.development.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1190:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\scheduler\index.js (6:2)
./node_modules/scheduler/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1201:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\react-dom\cjs\react-dom.development.js (27:24)
<unknown>
node_modules\react-dom\cjs\react-dom.development.js (29867:3)
./node_modules/react-dom/cjs/react-dom.development.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1135:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\react-dom\index.js (37:2)
./node_modules/react-dom/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1157:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\next\dist\client\portal\index.js (8:24)
./node_modules/next/dist/client/portal/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (533:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\next\dist\client\index.js (21:22)
./node_modules/next/dist/client/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (478:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\next\dist\client\next-dev.js (3:16)
./node_modules/next/dist/client/next-dev.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (489:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
__webpack_exec__
/_next/static/chunks/main.js (1217:61)
<unknown>
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1218:53)
<unknown>
webpackJsonpCallback@http://localhost:3000/_next/static/chunks/webpack.js?ts=1663273974032 (1303:46)
<unknown>
/_next/static/chunks/main.js (9:61)
Hi Guys, i have an case is this possible to combine an vertical section scroll and Horizontal scroll?
Hello 👋
I'm trying to create a button which, when clicked, will scroll the page down to a given Ref/ID/etc.
I'm struggling to figure out how to implement this from the docs.
What I have currently is roughly the following:
import { useLocomotiveScroll } from "react-locomotive-scroll";
const MyPage = () => {
const { scroll } = useLocomotiveScroll();
return (
[...]
<button onClick={(scroll) => scroll.scrollTo("#test", { duration: 1000 })>
Click me
</button>
<DestinationDiv id="test" />
[...]
)
}
I've also initialized <LocomotiveScrollProvider>
within my _app.js
which wraps my entire app.
What am I doing wrong here?
I keep getting the following error: Unhandled Runtime Error: TypeError: scroll.scrollTo is not a function
I've already flagged the code change responsible for this.
Basically, the warning is logged before locomotive-scroll
is loaded. So the warning is irrelevant at that point since it's not in fact due to configuration or usage issues.
The warning should be adapted to only log after the lib is loaded.
My NextJS app uses react-locomotive-scroll in the _app.tsx which works well:
import { LocomotiveScrollProvider as RLSProvider } from "react-locomotive-scroll";
import { useRef } from "react";
import { LocomotiveScrollProvider as RLSProvider } from "react-locomotive-scroll";
import "locomotive-scroll/dist/locomotive-scroll.css";
import "../styles/index.css";
function MyApp({ Component, pageProps }: AppProps) {
const { asPath } = useRouter();
const containerRef = useRef(null);
return (
<RLSProvider
options={{
smooth: true,
smartphone: {
smooth: true,
},
tablet: {
smooth: true,
},
}}
watch={[]}
location={asPath}
onLocationChange={(scroll: any) =>
scroll.scrollTo(0, { duration: 0, disableLerp: true })
}
containerRef={containerRef}
>
<div data-scroll-container ref={containerRef}>
<Component {...pageProps} />
</div>
</RLSProvider>
);
}
However, in my index.tsx which looks like the following, I cannot get the scroll.on function to work to report back the scroll position.
import { useLocomotiveScroll } from "react-locomotive-scroll";
const Index = () => {
const { scroll } = useLocomotiveScroll();
useEffect(() => {
scroll.on("scroll", function (instance) {
console.log(instance.scroll.y);
});
});
return (
<>
<div className="flex flex-col">
<HeaderMenu {...headerMenu} />
<main data-scroll-container className="grow pt-24 pb-32 md:pb-48">
{some content here}
</main>
<FooterMenu />
</div>
</>
);
};
This always returns the error that data-scroll-container has not been defined.
Hey and thanks for this wrapper! It helps a lot!
I've some issues when I use Next-image with the height of the container. Each time the page is loaded, the container has a different height.
It seems to be related to the fact of not indicating a size to the image component (I use the layout=fill option) and
not using the priority tag.
What can I do to fix that? Thanks!
this is my code
`
lorem ipsum dolor
lorem ipsum dolor
lorem ipsum dolor
<div
data-scroll
id="scroll-container flex place-items-center bg-green-900 w-1/2 relative"
>
<div
className="fixed bg-pink-900 "
data-scroll
data-scroll-sticky
data-scroll-target="#scroll-container"
>
<Image
src="/posts/insta-1.jpg"
width={500}
height={500}
alt="img"
></Image>
</div>
</div>
</div>`
With a long page, if you scroll down and then back up to the top of the page, the data-scroll element placed at the top disappears.
The element does not appear when scrolling to the topmost point up.
Apparently, this occurs when the overall Height exceeds about 2700px.
It was occurring in Chrome and not in Safari.
■When backing up to the top after scrolling down
my code
App.jsx
function App() {
const containerRef = useRef(null);
return (
<>
<LocomotiveScrollProvider
options={{
smooth: true,
// ... all available Locomotive Scroll instance options
}}
watch={
[
//..all the dependencies you want to watch to update the scroll.
// Basicaly, you would want to watch page/location changes
// For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters)
]
}
containerRef={containerRef}
>
<main data-scroll-container ref={containerRef} className="container">
<div data-scroll-section>
<ScrollTest />
</div>
</main>
</LocomotiveScrollProvider>
</>
);
}
ScrollTest.jsx
export function ScrollTest() {
return (
<>
<p>testetestes</p>
<h1 data-scroll data-scroll-speed="1">
hey
</h1>
<p>testestests</p>
<p>testestests</p>
<div
style={{ height: "2600px", width: "100%", backgroundColor: "red" }}
></div>
</>
);
}
While going through the documentation to use the package, I noticed the first paragraph under the "Specific cases" section, which reads:
If you want to write some code applied only when the location change but not when the rest of your dependencies added to the watch list change, here the thing:
This is not so readable, or grammatically correct, and would like to fix this.
Attempting scroll to top when the exit animation completes. Any ideas? The following throws the error:
TypeError: Cannot read properties of null (reading 'scrollTo')
import "../styles/globals.css";
import "../styles/locomotive-scroll.css";
import { useRef } from "react";
import { LocomotiveScrollProvider } from "react-locomotive-scroll";
import { useLocomotiveScroll } from "react-locomotive-scroll";
import { useRouter } from "next/router";
import { AnimatePresence } from "framer-motion";
function MyApp({ Component, pageProps }) {
const containerRef = useRef(null);
const { asPath } = useRouter(); // With next/router
const { scroll } = useLocomotiveScroll();
return (
<>
<div className="app dark">
<LocomotiveScrollProvider
options={{
smooth: true,
mobile: {
smooth: false,
},
tablet: {
smooth: false,
},
// ... all available Locomotive Scroll instance options
}}
location={asPath}
containerRef={containerRef}
// onLocationChange={(scroll) =>
// scroll.scrollTo(0, { duration: 0, disableLerp: true })
// }
>
<main
className="main dark:bg-black"
data-scroll-container
ref={containerRef}
>
<AnimatePresence
exitBeforeEnter
initial={true}
onExitComplete={() =>
scroll.scrollTo(0, { duration: 0, disableLerp: true })
}
>
<Component {...pageProps} key={asPath} />
</AnimatePresence>
</main>
</LocomotiveScrollProvider>
</div>
</>
);
}
export default MyApp;
✘ [ERROR] Could not resolve "tslib"
node_modules/react-locomotive-scroll/module/LocomotiveScroll.context.js:4:24:
4 │ const tslib_1 = require("tslib");
╵ ~~~~~~~
You can mark the path "tslib" as external to exclude it from the bundle, which will remove this
error. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.
node_modules/esbuild/lib/main.js:1649
let error = new Error(`${text}${summary}`);
Error: Build failed with 1 error:
node_modules/react-locomotive-scroll/module/LocomotiveScroll.context.js:4:24: ERROR: Could not resolve "tslib"
errors: [
{
detail: undefined,
id: '',
location: {
column: 24,
file: 'node_modules/react-locomotive-scroll/module/LocomotiveScroll.context.js',
length: 7,
line: 4,
lineText: 'const tslib_1 = require("tslib");',
namespace: '',
suggestion: ''
},
notes: [
{
location: null,
text: 'You can mark the path "tslib" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.'
}
],
pluginName: '',
text: 'Could not resolve "tslib"'
}
],
warnings: []
}
This thing doesn't work at all when using React 18!!! I've did exactly as the docs say, but I get only bugged version of smooth scroll.
I'm also using GSAP’s scrolltrigger which does not allow for the use of any data-scroll attributes. If I remove data-scroll-container from _app.tsx, however, it breaks the Locomotive Scroll and returns "Cannot read properties of null (reading 'offsetHeight'). I have instead already applied the "el" option:
<LocomotiveScrollProvider
options={{
el: containerRef.current,
smooth: true,
smartphone: {
smooth: true,
},
tablet: {
smooth: true,
},
}}
watch={[]}
location={asPath}
onLocationChange={(scroll: any) =>
scroll.scrollTo(0, { duration: 0, disableLerp: true })
}
containerRef={containerRef}
>
<div ref={containerRef}>
but that doesn't seem to work either. Is there another way?
I am using LocomotiveScroll in a React application and I have created a custom hook called useLocoScroll to handle the initialization and destruction of the LocomotiveScroll instance in order to make LocomotiveScroll work with gsap's ScrollTrigger. The hook works fine and I can use it to enable smooth scrolling and also use the ScrollTrigger in my app.
However, I now need to access the LocomotiveScroll instance from outside the hook so that I can call its methods directly. Specifically, I want to be able to call the scrollTo method on the nav buttons to scroll to a specific section.
The way I have it set up now is so I can use it like so const scroll = useLocoScroll(true)
in multiple files and destroy... I think only the last instance.
How can I modify this hook to allow me to access and use the LocomotiveScroll instance outside the hook without creating a new lomocotiveScroll instance every time?
Menu Component
const scroll = useLocoScroll(true); const handleLinkClick = (url) => { toggleNav && setToggleNav(false); scroll.scrollTo(url, { offset: 0, duration: 600, easing: [0.25, 0.0, 0.35, 1.0], disableLerp: true, }); };
App.jsx
` const scroll = useLocoScroll(true);
const { pathname } = useLocation();
useEffect(() => {
if (scroll) {
scroll.scrollTo('top', {
offset: 0,
duration: 600,
easing: [0.25, 0.0, 0.35, 1.0],
disableLerp: true,
});
}
}, [pathname]);`
Custom Hook
`import { useRef, useLayoutEffect } from 'react';
import LocomotiveScroll from 'locomotive-scroll';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
let locoScroll;
const useLocoScroll = (start) => {
const scrollRef = useRef(null);
useLayoutEffect(() => {
if (!start) return;
const scrollEl = document.querySelector('.App');
if (!locoScroll) {
locoScroll = new LocomotiveScroll({
el: scrollEl,
smoothMobile: false,
smooth: true,
multiplier: 1,
});
locoScroll.on('scroll', ScrollTrigger.update);
ScrollTrigger.scrollerProxy(scrollEl, {
scrollTop(value) {
if (locoScroll) {
return arguments.length
? locoScroll.scrollTo(value, 0, 0)
: locoScroll.scroll.instance.scroll.y;
}
return null;
},
scrollLeft(value) {
if (locoScroll) {
return arguments.length
? locoScroll.scrollTo(value, 0, 0)
: locoScroll.scroll.instance.scroll.x;
}
return null;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight,
};
},
pinType: document.querySelector('.App').style.transform
? 'transform'
: 'fixed',
});
const locoScrollUpdate = () => {
if (locoScroll) {
locoScroll.update();
}
};
new ResizeObserver(() => {
if (locoScroll) {
locoScroll.update();
}
}).observe(document.querySelector('[data-scroll-container]'));
ScrollTrigger.addEventListener('refresh', locoScrollUpdate);
ScrollTrigger.refresh();
}
scrollRef.current = locoScroll;
return () => {
if (scrollRef.current === locoScroll) {
ScrollTrigger.removeEventListener('refresh', locoScroll.update);
locoScroll.destroy();
locoScroll = null;
}
};
}, [start]);
return scrollRef.current;
};
export default useLocoScroll;
`
Sorry for the weird code tags. I tried to fix it.
Currently, I am experiencing an issue where adding a hash value to the URL (such as #something) causes unexpected behavior when I refresh the page. This occurs because I am using the Link component from react-router for the navigation buttons. Although there are no errors displayed, the layout breaks in an unexpected way.
Hey, I noticed a pretty significant issue.
Basically, the scroll position is preserved between pages/routes.
The container height does seem to update, and the scrollbar behaves normally.
Current behavior:
y: 1145
y: 1145
Expected behavior:
When landing on a new page, the scroll position should be 0, 0
(top of the page).
y: 1145
y: 0
If you need more info can draft a repro, thanks
Hello,
Thanks for making this port. I came across this issue. I'm running Gatsby v3 and initialized by app like so in layout.js :
`<LocomotiveScrollProvider
options={
{
smooth: true,
// ... all available Locomotive Scroll instance options
}
}
watch={
[
//...all the dependencies you want to watch to update the scroll
]
}
containerRef={containerRef}
>
<div data-scroll-container ref={containerRef}>
<main>{children}</main>
<Footer />
</div>
</LocomotiveScrollProvider>`
Then in my index.js page, I call the scroll variable:
const scroll = useLocomotiveScroll();
When I log the object to the console, it appears to be missing many things, including the scrollTo function. This is all that is in the scroll variable.
{ "scroll": null, "isReady": false }
If I initialize the variable as const {scroll}= useLocomotiveScroll();
- I get undefined.
Can you please help?
Thanks in advance :)
Idea that may improve code quality but could affect bundle size is to replace the import of locomotive-scroll
by using https://github.com/gregberge/loadable-components
I get undefined. I'm not sure what I am doing incorrectly here. I have access to the scroll object.
const { scroll } = useLocomotiveScroll()
Shouldn't this scroll object provide the Y position? Might be missing something, thank you.
const { scroll } = useLocomotiveScroll()
I have used this hook to get an instance of scroll but is returning null
in one of my component. The rest of the setup is done according to the documentation.
I keep looking for ways to make this feature in the original locomotive scroll work..
Are there any examples of the "data-scroll-call" attribute and how to structure the function it calls?
help me please.....
my website have a some Routes and when i change the path the scroll has a problem and doesn't reset scroll size
and it has problem in each page
Hello guys,
I'm trying to follow every issues and add fixes for the different cases but the time I can allow to maintain this project is quite low. If something would like to help me improving the module it could be cool!
thank you 🤘🏻
Hi there, is it possible to include an example on how to setup react-locomotive-scroll in nextjs with both different directions included?
help me please.....
my website have a some Routes and when i change the path the scroll has a problem and doesn't reset scroll size
and it has problem in each page
in LoloScroll component :
import { LocomotiveScrollProvider } from "react-locomotive-scroll";
import "locomotive-scroll/src/locomotive-scroll.scss";
import {useLocation} from 'react-router-dom'
import React, { useRef } from "react";
const LocoScroll = ({children}) => {
const containerRef = useRef(null);
const { pathname } = useLocation()
return (
<LocomotiveScrollProvider
options={{
smooth: true,
}}
watch={ [ ] }
location={pathname}
onLocationChange={scroll => scroll.scrollTo(0, { duration: 0, disableLerp: true })} // If you want to reset the scroll position to 0 for example
containerRef={containerRef}
>
export default LocoScroll;
Hi @toinelin thanks for this package a lot, I wanted to know what props we should add to the provider to avoid any weird scroll behaviors.
I have a component with data-scroll-call="testEvent"
and I am trying to make it fire the event when the component is in view. here is the component:
<section
id="education"
className="education"
data-scroll-section
data-scroll
data-scroll-class="purpleColor"
data-scroll-call="testEvent2"
>
...
</section>
I attached an event listener to the document
as follows:
useEffect(() => {
on("call", () => console.log("test event"));
}, []);
Where on
is this function:
function on(eventType, listener) {
document.addEventListener(eventType, listener);
}
But no event is fired! any fix?
This issue is also related to the fact that scroll.on()
does not exists, but It seems the problem is deeper since adding the event listener manually does not help either.
Long shot but does anyone have an example of how I would add Locomotive as a proxy for GSAP scrolltrigger with this package (as seen here with vanilla JS) -> https://codepen.io/GreenSock/pen/zYrELYe
Hi! I just followed the install instructions in the readme, then I got this error:
./node_modules/react-locomotive-scroll/module/LocomotiveScroll.context.js:4:0
Module not found: Can't resolve 'tslib'
null
Any idea why this happens, and how I can make it work?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.