Kane

Oh that's strange hahah. Thanks a lot for the constant support. Have a good day

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?

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

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 (https://codepen.io/akapowl/pen/poLPyBj 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

Hey @akapowl, Thanks so much for the detailed reply... you have gone above and beyond for me! Much appreciated.

Hi Again @akapowl, Sorry for the confusion, it seems the pen I was working on didn't save correctly. I have attached the correct one below. Basically I have two timelines that are working independantly. I have one commented out to start so you can see the first timeline I have made. Please invert the commenting to see the second animation also. When I uncomment them both, the green div no longer fixes to the top. What I suspect is that the offset that I am using to slowly slide the div2 up, to cover the yellow div, is making the fixed position of the green div outside of the view. Any futher assistance would be great, and I thank you for your patience with me on this one. I think it's not far off being the right implementation! NOTE: You may need to open the pen in fullscreen otherwise the y displacement looks quite unnoticeable. https://codepen.io/kanetesta/pen/oNqZOJL

Thanks @akapowl Ah yes it makes sense. Thanks so much for the quick reply. One more small tweak if I could get your help please as I've been stuck on this for a while also. Again, I can get these two animations to work independantly, but not on the same timeline. Maybe there's something wrong with my understanding. I want to have a div at the bottom of the landing screen (refer to the yellow block in the codepen). When a user scrolls, I want the next divs to gradually overlap it. However, the offset I am setting to do this animation, causes the header to become fixated outside of the view. How do I go about fixing this? Thanks so much in advance. Is there any way I can tip you for your help? https://codepen.io/kanetesta/pen/oNqZOJL

Hi There, I'm having a small hurdle with a project I'm working on and I'm wondering if you can help. I have a navbar that i want to fade in and then stick to the top of my site once the default slider is off the screen. The default slider is represented by the red section, the navbar is represented by the green section. I want the div to stick to the top of the screen once the user has scrolled a full page height's worth. However, if I add pin: true to my function, I lose how the nav fades in while I'm scrolling. How do I go about having both of these work parallel? Best, Kane