Jump to content
Search Community

horizontal scroll with REACT / NEXTJS

battleaxe10000 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi all,

I know this topic has been on this forum before, and I think I've read all of them (or at least almost all). Still I cannot get the horizontal scrolling to work.

The major difference between my version and the versions I've watched is that I'm not using any panels/sections or anything else like that. Just one big container.

 

So far I haven't been able to get any effect at all when scrolling. I've tried

* to put the scrolling within a container, and without a container.

* A whole lot of different versions to determine the x-width of what should be scrolled, and the same with the end value.

* Different widths and units for the scrolling container and, when used, the wrapping container.

* With refs, ids and classNames.

 

I 've read 

and 

 Still absolutely nothing.

 

Help!!! 😱

See the Pen xxYBROb by battleaxe (@battleaxe) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there!

 

Don't worry - I got ya.

 

So, a few tips.

- Easiest to just strip React out if you're battling and get it working in vanilla JS first - then you know it's not refs or useLayoutEffect that's causing the issue.

 

- Similarly, strip out ScrollTrigger and just focus on getting the tween itself working.


- console.log is your friend! If you log out wrapperRef.current.width you can see it's undefined

This is how you can get various 'width' values with JS
https://www.javascripttutorial.net/javascript-dom/javascript-width-height/

- xPercent is relative to the element itself, so xPercent: -100 will move an element left by 1x it's width. You're currently trying to animate the container by the width of the wrapper * - 100.  If you were getting the right values, on my screen this would be moving the container by 1200 times it's width. That's a little bit too far. 😂

 

- the wrapper and the container are both styled to be the width of the screen. The content div is wider and contains all the images - that's the one you want to animate, the container is just the window you're viewing it through. In order to animate it the correct amount you need to get the width of the content and subtract the window width.

Here ya go!

See the Pen eYVXvJy?editors=0011 by GreenSock (@GreenSock) on CodePen


 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Glad I could help. Another good tip then, step back from the code for a bit to have a think! I often draw out what I want to do on paper first.

HTML elements are just boxes. So draw some boxes and work out which boxes need to move where and how you need to style them. Then work out what values you need to know. Then work out how you can get those values. Then animate them. 🥳

 

If you start with someone else's code it's often harder because you're working with 'magic numbers' you don't know how they've arrived at that conclusion so you end up just tweaking stuff endlessly and hoping it will work.

Start with the problem and build from there.

Have fun!

  • Like 2
Link to comment
Share on other sites

Hi again,

 

@Cassie Thank you very much for your advice.

 

Now I have had some time to try the code you provided, and made some changes on my own.

 

Thinking out loud here....

What about an outer container that is absolute and an inner container that animate on the x-axis when scrolling?

That would require the window-width and the width of the inner container.

(x: window.innerWidth - contentContainer.current.offsetWidth)

 

If this solution, would it work with scrolltriggers (for example if you want to animate an image at a certain point)?

 

This works so far 🙂

Edited by battleaxe10000
clearer message
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...