ScrollTrigger on React - Have to refresh to make it works

[Adrien Snoos]

Hello there!! 

 

I'm new in GSAP animation, and I made a ScrollTrigger animation, and there's an issue I can't understand. I made researches and I readed posts that are already made about it, but can't fix it!!

 

Problem is the ScrollTrigger is not working at first time. Like homepage's displaying, I'm going to the ST's page, the second, called 'le collectif' and the animation is broken, but if I F5 refresh, it works!! I come back to home, go again to this page, still works. But if I go to home, refresh and go back to 'le collectif', same thing, it's broke untill I refresh...

I can't understand where is the problem. So after reading some subjects in here, I tryed to kill GSAP's instance, try to .refresh . But still here. I'm sure I'm missing something.

 

Here is the GitHub's link to see the component's code, and the rest of the website : https://github.com/adrien-dubois/the-square/blob/master/src/component/ServiceSec/ServiceSec.js

 

And here is the website ( don't look up details, it's not finished at all, there's a lot to do, and other pages are not made ) : http://square-corp.white-umbrella.fr/

 

And sorry for my english if it's not good 🙏🤓

[Adrien Snoos]

OK so I found the solution by myself 😁

 

I think this related to some bug in setting the initial scroll position. Still don't know why, but when I refreshing it, it works...

 

So I put this in the useEffect : 

 

setTimeout(() => {
  ScrollTrigger.refresh();
  console.log("scrolltrigger refresh!");
}, 1000);

It refresh the scroll trigger after the delay, and reset the all scroll position as I want.

It fixed the issue for now...

 

But the why? I really don't know

[elegantseagulls]

It sounds to me like you are setting your ScrollTrigger before all your dom content loads, or before images on the page are loading. You shouldn't need/use a timeout function for this.

[_Greg _]

You need refresh ScrollTrigger every time whan you load/unload/change something in the DOM part where did you use ScrollTrigger. If some DOM element where did you use ScrollTrigger change position, size... etc you need to call ScrollTrigger.refresh() for recalculate positions and sizes of DOM elements. 
If you refresh via Timeout you just doing useless calculations.

[Adrien Snoos]

OK understood why.

 

So how I can do it properly with React ?

[OSUblake]

You're going to have to be more specific than that. You call it when your layout changes or something loads that might affect the layout. 

[Adrien Snoos]

Don't really understand where I have to put the ScrollTrigger.refresh();

 

I tried different places where the DOM changes(before, after...), and in fact the DOM change just where I put my ScrollTrigger animation. 

So when the page loads, when I arrived on the page, there's already something's wrong, cause that affects my nav menu which has a translation with keyframes, and the text appears after the animation, when I delete ScrollTrigger, it works fine. The initial position have a bug

[OSUblake]

If need help, please make a minimal demo, like on codesanbox. And please don't include your entire project. Just provide enough code and context to recreate the issue. Thanks!

 

[Adrien Snoos]

I was affraid you ask this 🥲 I understand why, and I was avoiding it cause it could be kind tricky, there's lot of components involved in the page, that's why I gave the direct link of the project plus the GitHub link to the code. I thought (and hope) it should be enough, but I understood.

I'll try to reproduce it. Thanks for your patience

[henryb]

Hi Adrien, I am having the same problem in a Next.JS project. Did you figure out where best to call the ScrollTrigger.refresh in the end? Thanks  

[Rodrigo]

Hi @henryb,

 

If you're having any specific issues you can create a minimal demo using one of our NextJS starter templates on Stackblitz:

https://stackblitz.com/@gsap-dev/collections/gsap-nextjs-starters

 

Happy Tweening!