FarhanSU

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!

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!

Hi, I am trying to emulate this codepen: https://codepen.io/GreenSock/pen/21be48a8aad305b4341bd094361ec24a 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!

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

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.

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

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

Thank you so much. I will work my way around into implementing callbacks into my gsap animation. I appreciate all your help @elegantseagulls!!

Thank you @elegantseagulls! Apologies for the late response. I was trying somethings out with my codes. I am also looking at ways to do page transition using gsap but I haven't figured that out yet. Would you also explain what you mean by this? I thought you needed to use a ref for each element you want to target so it can only run once. Do you mean using one useffects and placing all the different scrolltrigger elements in it? I also found a work around with the animation problem. I updated my codesandbox and it is on line 12-19. The question I have about this is how can I optimize that to be more efficient? Thank you for all your help and patience!

Thank you @elegantseagulls and @Rodrigo so much! I have tried that and it does kill the timeline, but navigating away and then coming back to the page does not re-enable the animation. I have updated my code sandbox with what you suggested. I am not sure if i have to do that return statement for all my timeline hooks, but I tested it out but that did not seem to work. Is there a way where I can re-enable the animation after someone returns to a page (say the homepg)? Thank you once again guys I really appreciate it.

Hello! I am running an React app (CRA) with GSAP. I am still fairly new to React so I dont know the ins and out of React. I have a question about refreshing/re-running gsap animation after coming back to a page. So for example, If i am on the homepage and go through the page the animations works perfectly. However, If i navigate to another page and then come back to the Homepage either through the back-button or just through nav link, all the animations are gone and pictures and text are gone. I have used tl.kill() which solved the animation marker/content carrying over to different pages problem (although I dont think tl.kill() is the right approach.) I have used tl.refresh and then tl.enabled inside my useEffects() hooks to reinitialize the animations but that didnt work either. I have attached a code sandbox of a simplified version of my code to give you guys a better idea. I would really appreciate from you guys! Thank you in advance! This is my codesandbox: https://codesandbox.io/s/page-transition-omgpq?file=/src/App.js

Oh wow I completely misunderstood what you meant, I was thinking referencing to each div as the children component. Thank you so much @OSUblake, you're a life saver, it is working perfectly rn!!!

Thank you very much @GreenSock and @OSUblake for clarifying both the tl ref (which is good because I can fix that on the other pages) and the .children prop. I am not sure why using ref={agencyReveal.current.children} on my box elements results in an error that says agencyReveal.current is undefined. I also tried using React.createRef but the issue is still there. I have updated my codepen here: https://codesandbox.io/s/scrolltrigger-batch-dijll?file=/src/App.js However, the code written by @GreenSock using ref={el => agencyReveal.push(el);}} works Thank you all very much for your patience, I appreciate it immensenly!

Hello @ZachSaucier, I put the console log right before my return, and the console.log points the ref to Object {current: HTMLDivElement} current: <DIV class="box" style="transform: translate(0px, 100px);"></DIV> I am not sure what to do with that information since its not telling me something is wrong. Should it have said array instead of an object? ?

Yup, it is still this demo: https://codesandbox.io/s/scrolltrigger-batch-dijll?file=/src/App.js The ScrollTrigger.refresh is on line 66. The problem I was talking about is that, the batch only renders one box, and not the other 9 boxes i wrote. Scrolling past the elements, only the first box appears. I am not sure why the other boxes are not showing up? Thank you once again!!