Jump to content
Search Community

How to make horizontal scroll in vite-react.js using scroll trigger and locomotive?

developer_000 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hey all, I hope you are all well.

 

 

The earlier issue was that the scroll trigger and locomotive were not working but that issue was solved with a lot of difficulty now the problem is to get horizontal scroll in vite-react.js.

 

I have been trying for a long time to get horizontal scrolling using a scroll trigger and locomotive in vite-react.js but after a lot of trouble I got it but it is not working properly.

 

Issue in Gallery.jsx:

I have seen many solutions but none worked, then I wrote the code from chatgpt and did some customization which helped me but the problem is that

Quote

when the top of the element and the top of the screen meet, then the element and content is visible and scrolls horizontally. And when the horizontal scroll ends, the element and content disappear again.

 

go to: https://codesandbox.io/p/github/Developer0000000/flirtyflowers/main and open preview in a new tab, Only then will you see the locomotive being played.

 

 

 

Link to comment
Share on other sites

2 hours ago, Cassie said:

image.png
Hi there, I can't view your project I'm afraid! Can you adjust the permissions?

 

this is public, not private. I checked it on my other Gmail, and it opened.

How can I permit you? @Cassie

 

Can you see it?  this is live on: https://v22jwq-5173.csb.app/ 

 

And This is my GitHub repo: https://github.com/Developer0000000/flirtyflowers

 

pubic.PNG

Link to comment
Share on other sites

3 hours ago, Cassie said:

Hi there, I can't view the codesandbox and I can't debug a live site I'm afraid. It's too complicated.

We really need a working minimal demo in order to help. Sorry ?

 

image.png

Here's a very simple horizontal scrolling demo

 

 

 

 

Thanks @Cassie. Your time means a lot for me.?

 

 Can you give me your codesandbox name or email address, so that i can invite you in this project?member.PNG.d5fc7c57b1cdd3728b116c4db1a14849.PNG

 

 

 

Link to comment
Share on other sites

25 minutes ago, Cassie said:

I'm cassieevans on codesandbox, but maybe this will be all you need?
 

 


I reckon just delete the ChatGPT code (it makes stuff up) and use this working demo.

Good luck!

 

 

 

this work on simple html, css, and js but do not work properly in react.js.

 

@Cassie I sent you an invitation on codesandbox. please accept it & open preview in new tab.

 

Thanks?

 

 

Link to comment
Share on other sites

  • Solution

I got an invite but it won't open still.

Sorry mate I don't have much more patience for codesandbox errors ?

Here's a stackblitz doing exactly the same using React and the useGSAP hook. I put this together quickly just to demo that it works, it needs a little tidying up to use refs instead of classes, give the React docs a read if you need help there

 

https://stackblitz.com/edit/gsap-react-basic-f48716-ppgxck?file=src%2FApp.js

 

 

image.png

  • Like 1
  • Haha 1
Link to comment
Share on other sites

10 hours ago, Cassie said:

I got an invite but it won't open still.

Sorry mate I don't have much more patience for codesandbox errors ?

Here's a stackblitz doing exactly the same using React and the useGSAP hook. I put this together quickly just to demo that it works, it needs a little tidying up to use refs instead of classes, give the React docs a read if you need help there

 

https://stackblitz.com/edit/gsap-react-basic-f48716-ppgxck?file=src%2FApp.js

 

 

image.png

 

Thanks @Cassie

 

Your help means a lot to me.??

 

I found my mistake with the help of you.


My code was fine but the error was that I was putting a data-scroll-section on every section. That's why my content was hidden first and appeared when the screen met the element.

 

 

 

section.PNG

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...