Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
FarhanSU

Horizontal Scrolling in React

Recommended Posts

Hello! I hope you guys are doing good. I have a question about Horizontal scrolling in react. I have attached my code pen to illustrate my issue. I created a ref for the timeline and  then an array of refs to attached to the panels to emulate the document.querySelector(".portfolio") variable as seen in this CodePen and since i cannot set overflow-x: hidden to my body, I made a page wrapper that does that. However, the horizontal scrolling does not work but other animated element like the image fading in and the parallax effect of the title works. What am I doing wrong and what can i do?

 

Thank you guys so much for all your help now and in the past! Here is my CodeSandbox

 

Link to post
Share on other sites

Hey Farhan. When debugging these sorts of issues it's important to check:

  • All of the values that you're using
  • All of the targets that you're using
  • The order of your ScrollTriggers is correct

If you go through logging the values and targets and checking to see if they are what they should be. And make sure the order of your ScrollTriggers is correct. I think you'll be able to figure out what's wrong :) 

  • Like 1
Link to post
Share on other sites
18 hours ago, ZachSaucier said:

Hey Farhan. When debugging these sorts of issues it's important to check:

  • All of the values that you're using
  • All of the targets that you're using
  • The order of your ScrollTriggers is correct

If you go through logging the values and targets and checking to see if they are what they should be. And make sure the order of your ScrollTriggers is correct. I think you'll be able to figure out what's wrong :) 

Hello Zach, thank you for your reply. I am a little confused by what you mean. I have my scrolltriggers in order from the portfolio which is the parent wrapper to the title then to the first animation and then seconds animation. Am I using this end function and the x value wrong?

x: () => -(portfolioRef.scrollWidth - document.documentElement.clientWidth)},

I also have updated my codepen to reflect using the gsap.utils.toArray function and it is on line 48 and 70:

gshowtl.current = gsap.utils.toArray(firstRef.current).forEach((panel) => {

Using that the first two boxes does stagger but horizontal scrolling is not working.

I am sorry I am so lost. I appreciate your patience and your help :)

Link to post
Share on other sites

If you console.log(portfolioRef.scrollWidth); after your tween that uses it and you will see that it's undefined. Do that same thing for all of your values to make sure they're correct like I said :) 

  • Like 1
Link to post
Share on other sites
On 10/3/2020 at 6:37 PM, ZachSaucier said:

If you console.log(portfolioRef.scrollWidth); after your tween that uses it and you will see that it's undefined. Do that same thing for all of your values to make sure they're correct like I said :) 

Sorry! So i fixed the variable undefined issue. I have done that for both the scroll width and the client width and they both return 1340 (on my laptop) and 656 and 672 respectively on codepen. When I set the wrapper width  width to 600% it works but the images do not show up.

I am also no sure why if I put the ref on my section tag which has the class portfolio, the position of the images are messed up and does not show up in columns. But however, if i put the ref to the wrapper div, the pining works but on the example codepen, the scrolltrigger references the section tag.

I have updated my codepen to illustrate it. Thank you for your patience and help, I am struggling to emulate the same result.

Link to post
Share on other sites
On 10/3/2020 at 6:37 PM, ZachSaucier said:

If you console.log(portfolioRef.scrollWidth); after your tween that uses it and you will see that it's undefined. Do that same thing for all of your values to make sure they're correct like I said :) 

Hello again. Sorry to bring this forum back, I have made some progress but I am not sure why the second part of this animation is not working. I have the working codepen right here: https://codesandbox.io/s/horizontal-scrolling-zmnvf?fontsize=14&hidenavigation=1&theme=dark&file=/src/styles.scss

I have console.log both the element scroll width and client width so I know that is working. The pinning and the "firstAn"/firstRef is working. The page is scrolling horizontally (this page is a mix of horizontal and vertical scrolling fyi) but the content itself is not appearing. I am pretty lost so I would appreciate any help or guidance. Thank you again

Link to post
Share on other sites

Hey Farhan. What is wrong about the demo? Can you try to be more clear with what you're trying to accomplish?

Link to post
Share on other sites
On 10/31/2020 at 3:24 PM, ZachSaucier said:

Hey Farhan. What is wrong about the demo? Can you try to be more clear with what you're trying to accomplish?

Hi, I am trying to emulate this codepen:

See the Pen 21be48a8aad305b4341bd094361ec24a by GreenSock (@GreenSock) on CodePen

in this codepen the images are moving horizontally. In my codepen, only the parallax labeled animation is moving. But the images elements past the first two are not moving horizontally. I am checked my console log the elements labeled "secondAn" is there but I am unable to see those images move horizontally. I am not sure if that made sense. In essence, I am trying to mix horizontal and vertical scrolling together. Thank you for you patience and sorry for being such a pain. I am just struggling a lot. Thank you again!

Link to post
Share on other sites

You never define panelRef. Make sure it, and the other targets that you're using, are what they need to be.

Link to post
Share on other sites
On 11/2/2020 at 8:25 AM, ZachSaucier said:

You never define panelRef. Make sure it, and the other targets that you're using, are what they need to be.

Hello! I am sorry to open this up again, I have been trying a lot of things. It is working much better than last time. I cleaned up my SCSS and included an if else statement that included the gsap component. and multiplied portfolioRef.current.scrollWidth document.documentElement.clientWidtd by 2. The only problem I am having is that the elements with the ref={firstRef} does not go away, and all those one of the "secondAn" is actually moving, the rest of the secondAn with the ref={secondRef} are not moving to the left. I have updated the codepen: https://codesandbox.io/s/horizontal-scrolling-zmnvf?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js:940-1027

 

I have also added anticipated pin. On line 114-128, I tried the scrolltrigger batch with secondRef.current.children and created a wrapper div to wrap all the elements with the class "secondAn" and assigned the wrapper div the ref of {secondRef} but that did not work as well. Tried setting the portfolioRef div to width: 200vw, and width: 200%  instead of width: 100%.  I am completely out of idea. I would really appreciate if you can help me! Thank you so much and I deeply apologize for asking so many questions!

Link to post
Share on other sites

Hey Farhan. When building something like this, build it piece by piece. Get just the first thing working, then add the second, and so on. If you get stuck, try to create that effect in a standalone way and then mix it into the larger project.

 

If you have a specific question please let us know and we'll do our best to help. Asking multiple questions just saying it's not working isn't a very good way to approach things. 

Link to post
Share on other sites
1 hour ago, ZachSaucier said:

Hey Farhan. When building something like this, build it piece by piece. Get just the first thing working, then add the second, and so on. If you get stuck, try to create that effect in a standalone way and then mix it into the larger project.

 

If you have a specific question please let us know and we'll do our best to help. Asking multiple questions just saying it's not working isn't a very good way to approach things. 

Hello, I just figured it out this morning. I ended up putting the panelRef into an array and the panel are finally moving. Thank you again!

Link to post
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.

×