Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About FarhanSU

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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!
  2. 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-z
  3. 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 stru
  4. 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
  5. 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 up
  6. 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 boxe
  7. 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?
  8. Thank you so much. I will work my way around into implementing callbacks into my gsap animation. I appreciate all your help @elegantseagulls!!
  9. 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 optimi
  10. 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.
  11. 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 prob
  12. 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!!!
  13. 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 T
  14. 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? 😕
  15. 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!!