Jump to content

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


  • Posts

  • Joined

  • Last visited

ss1067's Achievements



  1. Oh, I see. I knew it would boil down eventually to a lack of knowledge in React or Gatsby. It works fine now. You're right, I didn't use refs in this one but I've both used refs and targeted directly with ids/classes in my project (not at the same time) and didn't notice a difference so I figured it didn't matter at the time. Thanks for that guide!
  2. I see. Sorry for the delayed reply. I was creating a minimal demo to make it easy to debug. I found out it works normally with class components when I use componentDidMount() since that only fires once when the comp mounts but useEffect fires multiple times, causing this weird bug. Live demo: https://xenodochial-heyrovsky-c2a69e.netlify.app/ You can reproduce the bug by clicking on one of the nav links repeatedly. repo: https://github.com/ajj-siraj/gatsby-gsap-minimal-test if you want to try it locally I created the useEffect branch to switch between both easily. Master branch contains the class component version.
  3. Hi Zach. I apologize, that was not my intention at first. I wanted to know how to do this: As it might be the cause of the problem because it's the only part I didn't add. If you can't help, I'm sorry to waste your time. I'll ask somewhere else.
  4. Hi, thanks for replying so quickly. Unfortunately I checked every single topic marked with 'gatsby' in this forum and none of the solutions worked for me. My issue is not that it doesn't work. It animates some stuff normally, but.. It's inconsistent, sometimes the animation pauses mid-way, other times doesn't start at all. There's also a weird thing that happens when clicking on anchor links (for in-page navigation) in the middle of an animation it ends up setting that state as the new 'original' state or something like that. For example, I have an element that fades in and starts with alpha: 0, and it animates to alpha: 1 normally, but when I click these anchor links in the middle of the animation, it seems to think that's the new 'normal' value, if it stopped at alpha: 0.5 then it only animates up to that until you refresh the page. Do you have any idea why that happens? I wonder if redux also somehow plays a role in this 😕 I tried to reverse it with gsap.to but same effect. The only one that works is the navbar when it switches colors on scroll. The navbar links also work well but you'll notice occasional glitching when you hover over them too fast. They get stuck, but then unstuck when you hover them again.
  5. Hi. I'm quite new to GSAP and Gatsby (first time using gatsby and second time with GSAP), GSAP is quite buggy with me. Sometimes animations trigger, sometimes not. I followed the NPM usage guide you put on this site, except this step, which might or might not be the problem but I want to exhaust all options before I ask for further help: I'm sorry if this is not GSAP specific. I just want to understand the above code segment so I can know how to translate it properly in Gatsby's config. Transpilers, Bundlers, Webpack, Babel still confuse the heck out of me since I'm a newbie developer still. 😅 Gatsby's and Webpack's docs don't show an option like this so I'm not sure how to approach this. Can someone tell me how to do that in Gatsby? Thank you for this amazing library it's been a joy to use (outside Gatsby at least!).