Kane Posted October 27, 2022 Share Posted October 27, 2022 Hi There, I've posted previously which was super helpful and I am just wondering if I could have some assistance with how this behaves when I port it to React. I have been sifting through the documentation on and off for months now and just can't find the solution. Basically I have a landing page, and as you scroll down, the nav fades in at the top of the second section, and then pins to the top once it hits the top of the screen ( is the intended behaviour). I have created a variable called `textSize` that convert a css viewport width to pixels as I couldnt get the timeline to work using vw. As a result of this, I believe it is throwing off some calculations when the screens are resized/orientation is changed. To ensure that the timeline recalculates on resize, I added props that trigger a useEffect when the screen is resized. I'm using useRef to point to the same timeline, and am killing it before re-creating a new timeline. I have replicated this in CodeSandbox https://codesandbox.io/s/youthful-ganguly-c2qfr2 (or https://c2qfr2.csb.app/ for site only) A way to replicate this is to open the site, scroll down a bit, then open inspect element and resize the screen. You will notice that in a lot of cases, the nav either disappears completely, or just renders wrong. Or even just simply opening the site on an iPad/iPhone and changing the orientation of the device breaks the nav. I also noticed that this is more likely to happen if you have scrolled down the page before you re-size. What am I doing wrong? Any guidance would be greatly appreciated. Best, Kane See the Pen poLPyBj by akapowl (@akapowl) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 27, 2022 Share Posted October 27, 2022 Hi, Indeed there is something weird that kind of eludes me in terms of what could be causing it. I'll ping @GreenSock so He can take a look at the codepen (debug link for testing resize: https://cdpn.io/pen/debug/poLPyBj) and tell us about that particular problem. It might be the pin reparenting but I'm not sure about that. Beyond that is worth noticing that you are using GSAP 3.10.4 in codesandbox, while in codepen you have the latest version (makes no difference as far as I can see), but always try the latest version and check your dependencies to ensure that. I forked your sandbox and made a few changes to it in order to make it cleaner and I'm using GSAP Context in it as well: https://codesandbox.io/s/long-worker-w8yxzu?file=/src/components/pages/home/Home.js Please stand by a bit, thanks for your patience. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted October 28, 2022 Share Posted October 28, 2022 I don't have time right this second to dig into this, but one thing jumped out at me - you've got CSS transitions applied to various things, right? You definitely should NOT have CSS transitions applied to anything that GSAP would possibly touch. That will mess it all up because part of the process GSAP must do is revert things during a refresh(), get them back to "normal" state, do measurements, top-to-bottom, etc. If you've got CSS transitions applied, when GSAP tries to change the values (and it'd do that temporarily during a ScrollTrigger.refresh()), the CSS transitions will be like "NOPE, sorry, I'm not gonna render that change, GSAP - I'm gonna drag that out over time instead" which of course will cause problems. Have you tried removing the CSS transitions? Does that resolve things for you? Link to comment Share on other sites More sharing options...
Kane Posted November 1, 2022 Author Share Posted November 1, 2022 Hey @GreenSock & @Rodrigo! Thanks for the quick feedback. I went ahead and removed the transitions and it seems that the problem still persists. Ex. If I scroll down to the bottom of the page & then resize, I have to scroll back up to the top for it to start working again. https://codesandbox.io/s/relaxed-villani-i5nrcx Link to comment Share on other sites More sharing options...
GreenSock Posted November 1, 2022 Share Posted November 1, 2022 It looks like because you're doing pinReparenting which is tricky/expensive. I'd just set pinType: "transform" instead of pinReparent: true for the header ScrollTrigger. Does that help? Link to comment Share on other sites More sharing options...
Kane Posted November 2, 2022 Author Share Posted November 2, 2022 Hey! It does solve the re-sizing part of the problem. However, the text that I have positioned at the bottom of the initial landing view is now sitting at the bottom of the whole document. Do you know what might be causing this? Link to comment Share on other sites More sharing options...
GreenSock Posted November 2, 2022 Share Posted November 2, 2022 If I understand you correctly, just turn off markers - those are for development only anyway. Link to comment Share on other sites More sharing options...
Kane Posted November 2, 2022 Author Share Posted November 2, 2022 Oh that's strange hahah. Thanks a lot for the constant support. Have a good day Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now