Leaderboard

I noticed quite a few problems: You were trying to select the elements before the component rendered which means there will be no results: let sections = document.querySelectorAll(".overlaySection"); You need to select stuff inside the useGSAP() hook because that's called after the component renders. This is all just React stuff, unrelated to GSAP. There was no reason to even create a timeline or tl variable. You were referencing window.width and window.height which aren't things. I think you meant window.innerWidth and window.innerHeight You didn't define an "end" for your ScrollTriggers. I think you wanted "max" You were trying to pin an element that's INSIDE of a pinned element which you cannot do. The way you set things up makes it very tricky. The child component actually needs to pin the parent element and since React renders in reverse order (children first), it isn't even available to define as the pin, thus you'll need to find a different way to pass that data up the chain and create the ScrollTrigger when the parent renders. You were creating ScrollTriggers in the wrong order and you didn't set a refreshPriority. It's very important that things get refreshed in the order that they appear on the page because pinned elements further up on the page can push things further down the page, affecting the start/end values of ones below. You don't need to pin the final element. You didn't have position: relative set, so the browser won't render the final element in front of the others that were translated. This is a CSS thing, unrelated to GSAP. Much of this stuff is purely about React (and I'm no React expert), but I created a pull request for you with some changes that'll hopefully get you on your way. Normally we don't do this kind of thing (it's a lot of custom logic and fixes), but I wanted to help and I had a little time: https://github.com/Mika-Otter/GSAP-Helper/pull/1

Thank you very much. I must have left this error from an earlier version; if it concerns the second point, that's a similar story. Before I managed to run the fade-out animation without using a useState variable, I was attempting to hide the effect of different sizes caused by re-rendering. However, with the current understanding, it seems to be nonsensical. I think that if it works, and indeed it does, it doesn't need to be improved. However, maybe Mr. @Rodrigo has something to say about the way the button's onClick function is passed? Thank you in advance. I think I found the solution here: https://gsap.com/resources/react-advanced/