Jump to content

Adrien Snoos

ScrollTrigger on React - Have to refresh to make it works

Moderator Tag
Go to solution Solved by Adrien Snoos,

Recommended Posts

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 🙏🤓

Link to comment
Share on other sites

  • Solution

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(() => {
  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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

OK understood why.


So how I can do it properly with React ?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!


Link to comment
Share on other sites

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

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