FarhanSU
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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!!
-
Thank you the advice. I added a different varible for a different timeline since I do not want the timeline with the batch to have a pin. I really just want a simple y: 100 and fade in box which i was assuming what theonEnter: batch => gsap.from(batch...) did. Is there anywhere else I should add a gsap.to/gasp.form? On the codepen, I have added the Scrolltrigger.refresh() right after my batch calls however, I must be doing something wrong because I made the container height bigger, but none of the other boxes shows up and I do not know if using the same ref is on each div box is working. Would I need to set a trigger on my batch, I have tried that setting the batch ref to the container but that did not work? I apologize for my ignorance I am still struggling with this method, but since one of my page on my app is going to have many boxes, I think it would be more efficient to use batch or even arrays (which I am also clueless about) than individually writing a ref for each box . Thank you for all you guys help! I really appreciate it
-
Thank you @Ihatetomatoes for your help again, and I apologize for the late reply. I meant avoid using the map function, if i could use the same ref that that would be perfect so I can style each element seperately. I tried using classname but it does not work. Aside from gsap.utils.toArray, I discovered the the Scroll Trigger Batch method. I gave it a shot trying to implement it in React through useEffect. I have tried following this gsap tutorial on .batch https://codepen.io/GreenSock/pen/zYrxpmb On my app, It didn't work using the class trigger but using an useRef const worked only on one of the element even tho i set the ref to each element. What am I doing wrong? This is my codepen: https://codesandbox.io/s/scrolltrigger-batch-dijll?file=/src/App.js I added some extra content, and if you scroll down you would be able to see the batched section. I am not getting the error on the codepen but i do get an errorTypeError: element.getBoundingClientRect is not a function and it is pointing at the scrolltrigger batch. I fully understand I can not just add ScrollTrigger.Batch but I do not know how to do it otherwise. Thank you very much in advance!
-
Hellp, thank you for you response. I have tried this earlier on one of my other pages. Thank you for writing this article, it did help. For this particular page, I was hoping for more of a dynamic approach without having to hard code them before, so I can use images, or link elements to another page, and etc. Is there any way to do that? Say even creating multiple refs and/or one trigger ref to be used multiple times on different elements?
-
I am really sorry once again. I accidentally used the same code sandbox for another project. I have replicated the issue I am having in this. Which is when using gsap.utils.toArray to animate multiple elements (the blue and the red text in this case) with the same ref, but the scroll trigger animation only works for one of the element (the red text only.) The working codebox: https://codesandbox.io/s/suspicious-leaf-up3l7?file=/src/App.js I am sorry once again for my ignorance, I appreciate any help because I am struggling to figure this out.
-
I am sorry again! This is the link to a working one: https://codesandbox.io/s/suspicious-leaf-up3l7?file=/src/App.js
-
Hello, I hope you all are doing well. I am becoming a little more familiar with GSAP and read about the gsap.utils.toArray which would be useful for animating multiple items and I was wondering how I would use this in React. I gave it shot trying to make it work, but for me it only worked on one element. I also had trouble setting up this on codepen. I originally had const st = useRef(ScrollTrigger.defaults({toggleActions: "restart reset restart reset"})); but on Codepen it says ScrollTrigger.defaults is not a function. The rest of the code are identical to what I wrote. I am using this codepen as a reference: https://codepen.io/GreenSock/pen/yLeNodj. I would really appreciate on any advice on how to approach this! (This one below is mine)
-
Thank you very much at @ZachSaucier. I figured out the problem with the pinning elements. There was an element that is using transform in app.css. And the pinning was resloved by settingpinReparent: true it "will be reparented to the <body> while it is actively pinned so that it can escape any ancestor containing blocks."
-
Hello Zach, it is the same codepen from above: https://codepen.io/FarhanSU/pen/RwrBKVM?editors=0010 (I added the dependencies so It should show up visually)
-
Sorry for the errors, that was my first time using codepen. And thank you very much @OSUblake. I just have one last question. Because this seems to work on codepen but however it is not working on my react environment. I made a screen recording of what I am referring to here: https://youtu.be/0R1JmgOp46Y Any possible reason why this is not working? Thank you once again for the help, I really appreciate it all!
-
Hello again! Unfortunately I am still struggling. There is no more error but the scrollTrigger is still not working. I stumbled on this forum: and it is basically exactly what I am trying to do. I tried to replicate this and add a ScrollTrigger so I can pin elements. However, when the Box enters the viewpoint, it disappears. I would to know how I can set the initial opacity to 0 and it revels when you scroll to the center of the view point. And in other instances, an elements would slides in from either sides. I hope what I am asking makes sense. I also have a codepen this time: https://codepen.io/FarhanSU/pen/RwrBKVM I am also open to class components edits rather than hooks because it seems a little bit more complicated. Thank you @OSUblake @GreenSock very much for your help!
