Yiddy

Turns out the issue is still there but only when resizing the width. I am not sure why. 😕

@mvaneijgen I checked it now on my pc & while removing the onUpdate definitely resolves the issue with the order (for some reason it wasnt working well until I removed padding fromt he search-container which you also removed however I dont understand why that made a difference) Another issue arises now that the search-container pinning is not working well. It doesnt get pinned below the navbar now It gets pinned to its original position when the page loads. I wanted it to be pinned just below the navbar during the animation both when going into the nav-search-container & out. Also for some reason there are start & and markers throughout the whole height of the page. Why is it not just at the top? Edit: the issue seems to be related to the input tag not being closed. The fact that the start & end markers were showing many times throught the page was actually what made me think to look for that lol.

Thank you @mvaneijgen. Originally the code was much shorter & on update was not there. I was just trying many different things (without being sure when to use what in GSAP) and some things were added unnecessarily & removed over many different revisions hence why I made sure to add comments to everything as this was just me trying all different things. Your version seems to work perfectly I will check later when I am at my PC to make sure but it seems to be exactly what I am looking for. Many thanks.

I am new to GSAP & have been playing around & failing. Chatgpt was not much help either. I am trying to get the searchbar to change the width while outside the navbar which works well when scrolling down however when scrolling back up the width changes before the position changes.