Locomotive scroll is a simple scroll library, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport.
Questions tagged [locomotive-scroll]
111 questions
2
votes
2 answers
Locomotive Scroll with React 17
I'm trying to use Locomotive Scroll with React 17. I don't know how to setup the component correctly for it to work. All examples I find are for older versions of React, that I don't understand.
Does anyone know how to get this to work?
I'm thinking…
flow2000
- 21
- 1
- 3
2
votes
1 answer
Scroll direction is wrong Locomotive scroll
I'm trying to achieve same scroll effect as in this example.
Section2
As per docs I have added data-scroll-direction="horizontal" however its reversed, on scroll down it moving from right to left but should be other way around. Also am not getting…
Alina Khachatrian
- 757
- 1
- 6
- 19
2
votes
0 answers
locomotive-scroll for smooth scrolling - body not displaying entirely
I'm using locomotive-scroll library for smooth scrolling on my project.
The scroll-container is on an html main tag (header and footer are not included). Everything is working except a part of the page is not displaying at the end (approximately the…
Fewzi
- 21
- 2
1
vote
0 answers
github authentication error for installing gsap-scrolltrigger in react project
so I was trying to use gsap along with locomotive scroll and scrolltrigger plugin installing gsap and locomotive was not a problem but whenever I try installing scrolltrigger using npm install gsap gsap/ScrollTrigger command my terminal shows error…
Utkarsh
- 21
- 1
1
vote
0 answers
Error using LocomotiveScroll: Uncaught TypeError: Cannot read properties of undefined (reading 'inView')
I'v been setting up Locomotive scroll on my site and suddenly got the following error and cant see or think I've done anything for this to happen. I'm struggling to work out the issue and any pointers would be great.
The function to add scrolled to…
pinkp
- 445
- 2
- 12
- 30
1
vote
1 answer
How do I call the on() method in react locomotive scroll?
I haven't found in the documentation or on the internet how to call the on() method in the react locomotive scroll. If you know how to do it, please advise.
const ref = useRef(null);
const options = {
smooth: true,
lerp: 0.08,
table: {
…
Alexsander
- 55
- 6
1
vote
0 answers
Why is the pinned content of my scrolltrigger disappearing (Locomotive Scroll)
My slider component disappears when it should pin to the page. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock. I cannot get…
inzn
- 61
- 8
1
vote
1 answer
Sticky element with LocomotiveScroll doesn't work
for a personal project I'm using Nextjs and locomotive-scroll, I'm trying to stick an element with position:sticky; and data-scroll-sticky but it's still not work, here is the code:
import LocomotiveScroll from…
Ahmed Amer
- 61
- 6
1
vote
0 answers
Changing the color of the navigation bar depending on the background
I need to smoothly change the color of the logo and menu depending on the background color.
It would be best if I could choose the colors myself, e.g. in the second section let the color change to red and in the third to green
I am using…
Lucas
- 11
- 3
1
vote
1 answer
Locomotive scroll doesn't work in my Nuxt3 project
I'm using locomotive scroll and nuxt3. This is my repo: https://github.com/cyprianwaclaw/nuxt.git
I imported async locomotive-scroll in layouts/scroll and added this layout in main app, but the scrolling is not smooth.
My styleccs are in the…
Cyprian Wacław
- 31
- 1
- 5
1
vote
1 answer
ScrollTrigger not work when direction is horizontal
I have a sample code, using gsap and Locomotive Scroll
1
vote
0 answers
Smooth scroll (locomotive scroll) and scroll triggered animation (framer motion + react-intersection-observer) bug
How can we make smooth scroll from locomotive scroll and scroll triggered animations (with framer motion and react-intersection-observer) coexist ?
I've made a very basic codesandbox with smooth scroll enabled and a small animation scroll triggered…
Alexandre PUJOL
- 121
- 8
1
vote
2 answers
useEffect cleanup in React 18
i'm using locomotive scroll with next.js, after react v18 my clean up stage is stopped working... Can someone explain why?
useEffect(() => {
let scroll;
import("locomotive-scroll").then((locomotiveModule) => {
scroll = new…
Denis Kunitsyn
- 45
- 1
- 5
1
vote
1 answer
locomotive scroll disable the scroll of my page
When I put this function : const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
The scroll of my page not working and i can't scroll into the page, when I put this function in comment, the…
Exosky
- 11
- 1
1
vote
0 answers
Bottom of the page is missing on load
I have a strange issue on Firefox when I'm trying to load my page https://lefutoir.fr/
I miss the last part of the bottom which then reapper when I reload the page.
I'm using locomotive scroll on it and I'm pretty sure its linked to that but I have…
Lieutenant Columbo
- 11
- 1