Jump to content
Search Community

ScrollTrigger on React - Have to refresh to make it works

Adrien Snoos test
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

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

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

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