ScrollTrigger start not working

[justinedelson]

I am using the demo code from this

See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen

to hide/show my header.

 

My problem is this code is triggered at the middle of my hero animation code. I set the trigger to the next section but it seems to be ignoring my tigger and start rules.

 

Any help is appreciated.

 

Thanks

See the Pen bGRpNNO by justinede (@justinede) on CodePen

[GreenSock]

That's because you're creating that ScrollTrigger BEFORE the one that affects the positioning of the trigger you're using (#work). So when it reads the position of #work in the DOM, it's relatively high on the page but then LATER you're creating a ScrollTrigger that pins things and pushes #work much further down. 

 

It's always best to create your ScrollTriggers in the order they'd happen on the page. So you can just move that code down to the bottom. Or you can simply set refreshPriority: -1 on that ScrollTrigger to basically say "make this a lower priority in the refresh order" (the default refreshPriority is 0, thus this one would get refreshed last). 

 

Side note: I saw that you've got a CSS transition applied to that .orange element which you're also animating with GSAP. That's almost always a very, very bad idea The CSS transition won't allow GSAP to make its update in a timely fashion - the CSS transition will force it to take a while. Bad for performance too. I'd recommend just using GSAP to do your animation(s). 

[justinedelson]

Thanks for your help.

 

Any tips for getting this to work well with React? This codepen is actually being used on a Gatsby project.

 

It works on the first load of the homepage. But if I go to about, then back home it has the same issue. https://share.getcloudapp.com/4gulZ8GP

[GreenSock]

I'm not familiar with React or Gatsby and it's really difficult to troubleshoot by watching a screen recording, but usually with frameworks you need to just make sure you kill() all the old ScrollTriggers from the page you're leaving, and then call ScrollTrigger.refresh() AFTER you've fully loaded the new page and the DOM is completely settled. Usually there's a lifecycle event you can tap into. 

 

But yeah, lots of people use GSAP/ScrollTrigger in React so it should be totally doable. 

 

If you can't get it to work, please isolate the issue in a CodePen or CodeSandbox with as little code as possible (don't include your whole project) and post here - we'd be glad to answer any GSAP-specific questions. I can't promise we'll be able to answer framework-specific questions.