ss1067 Posted August 7, 2020 Share Posted August 7, 2020 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!). Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2020 Share Posted August 7, 2020 I'm totally unfamiliar with Gatsby but I know that plenty of people use GSAP in it, so it's absolutely doable. GSAP can animate literally anything JS can touch. Maybe this post would help you? Happy tweening! 2 Link to comment Share on other sites More sharing options...
ss1067 Posted August 7, 2020 Author Share Posted August 7, 2020 18 hours ago, GreenSock said: I'm totally unfamiliar with Gatsby but I know that plenty of people use GSAP in it, so it's absolutely doable. GSAP can animate literally anything JS can touch. Maybe this post would help you? Happy tweening! 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 7, 2020 Share Posted August 7, 2020 Hey ss1067 and welcome to the GreenSock forums. Please make a minimal demo that's focused on one issue at the time. It's asking a lot of us to try and debug your entire project Link to comment Share on other sites More sharing options...
ss1067 Posted August 7, 2020 Author Share Posted August 7, 2020 8 hours ago, ZachSaucier said: Hey ss1067 and welcome to the GreenSock forums. Please make a minimal demo that's focused on one issue at the time. It's asking a lot of us to try and debug your entire project 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. Link to comment Share on other sites More sharing options...
OSUblake Posted August 7, 2020 Share Posted August 7, 2020 1 hour ago, ss1067 said: 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. That's for nuxt, not Gatsby. It's not the cause of your problems as you said gsap is running. 15 hours ago, ss1067 said: 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. Sounds like a logic problem, not a Gatsby problem. Hard to say without seeing what you're doing. 2 Link to comment Share on other sites More sharing options...
ss1067 Posted August 8, 2020 Author Share Posted August 8, 2020 13 hours ago, OSUblake said: That's for nuxt, not Gatsby. It's not the cause of your problems as you said gsap is running. Sounds like a logic problem, not a Gatsby problem. Hard to say without seeing what you're doing. 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. Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 8, 2020 Share Posted August 8, 2020 Hi, useEffect can fire only once if you specify an empty array as it's dependency. useEffect({ ... }, []) Also you are not using useRef() to target your elements, check out the guide below. https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/ Hope that helps. 4 Link to comment Share on other sites More sharing options...
ss1067 Posted August 9, 2020 Author Share Posted August 9, 2020 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now