Jump to content
Search Community

GSAP behaves weird with Gatsby/React

ss1067 test
Moderator Tag

Recommended Posts

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:

transpilegsap.jpg.c1331ba45a2bed325193ba9d8679dd80.jpg

 

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

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

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:

transpilegsap.jpg.c1331ba45a2bed325193ba9d8679dd80.jpg

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

 

1 hour ago, ss1067 said:

I apologize, that was not my intention at first. I wanted to know how to do this:

transpilegsap.jpg.c1331ba45a2bed325193ba9d8679dd80.jpg

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.

 

 

  • Like 2
Link to comment
Share on other sites

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

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! 
 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...