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
  1. Thank you so much. I will work my way around into implementing callbacks into my gsap animation. I appreciate all your help @elegantseagulls!!
  2. 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!
  3. 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.
  4. 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
  5. 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!!!
  6. 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!
  7. 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? 😕
  8. 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!!
  9. 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
  10. 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!
  11. 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?
  12. 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.
  13. I am sorry again! This is the link to a working one: https://codesandbox.io/s/suspicious-leaf-up3l7?file=/src/App.js
  14. 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)
  15. 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."