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

[developer_000]

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.

 

 

 

[Cassie]

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

[developer_000]

2 hours ago, Cassie said:

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

 

[developer_000]

@Cassie Hi, how are you.

 

Is it opend?

this is live on: https://v22jwq-5173.csb.app/

[Cassie]

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 😞

 

Here's a very simple horizontal scrolling demo

 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

[developer_000]

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 😞

 

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?

 

 

 

[Cassie]

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

See the Pen QWRowRW?editors=1010 by GreenSock (@GreenSock) on CodePen

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

Good luck!

[developer_000]

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🖤

 

 

[Cassie]

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

 

 

[developer_000]

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

 

 

 

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.

 

 

 

[Cassie]

Hooray! Glad we got there 🥳 Good job bug-hunting