Jump to content
Search Community

ScrollTrigger only works on page refresh

sparker888 test
Moderator Tag

Recommended Posts

Hi all, I have a page that's made up on nine components. The top two components have gsap timelines (one with ScrollTrigger) that work fine. But there are six 'skills' sections below this with animated titles and intro paragraph with ScrollTrigger that only work after a page refresh. I wish I could put into a CodePen, but it's not possible to incorporate nine react/Gatsby components into the tool. There is nothing unusual with my gsap code though. Independently, they appear to work fine. You can see the page here: https://www.sparker888.com/skills/  any suggestions or guesses are appreciated. Thanks!

 

Edit: This is one of the skills components if you wish to see the code: https://github.com/sparker888/sparker888/blob/main/src/components/JavaScriptSkills.jsx

Link to comment
Share on other sites

5 hours ago, sparker888 said:

There is nothing unusual with my gsap code though.

 

I see you have a bunch of nested ScrollTriggers, which is one the most common mistakes people make.

 

Outside of that, the page you linked to seemed to be working fine. You might want to double check to make sure your useEffects are firing, like maybe with some console.log statements. Weird stuff can happen with frameworks that SSR, like Gatsby, because the initial page load runs a little different.

 

  • Like 2
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...