Adrien Snoos

Ho my ... ??‍♂️ Shame on me... And I tried other triggers. Solution is often simpler than I search for. Thank you for your time chef

Hello guys, So I tried to put an horizontal scroll in the middle of my page, with React JS, I look at the demos, check the messages, and tried many things between CSS and GSAP, but nothing works. Problem is, when I scroll first vertically, all's good, horizontal section comes, and if it's at the end of the page, works great. But when I put another vertical section behind, the vertical section pass through / in front of or behind the horizontal section ( depends on the div position), but it does not blocks the section behind horizontal, I don't get it. So I tried to make you a minimal demo, but on CodePen I did not succeed with all the component in other pages, so I make it in CodeSandbox, for you to have all informations that I put on my code. Thanks to all of you, I'm getting mad https://codesandbox.io/s/compassionate-sinoussi-z842z7?file=/src/App.js

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

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

OK understood why. So how I can do it properly with React ?

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

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