MCBS

Great! Thank you very much!

You're right, this looks much better now! Last question: what about the "extra space" from red site logo and white navbar? After scrolling, if you go back on top of the page, you'll see that navbar is more distant than before, because of "yPercent" animation. I don't understand how to fix it.

Hi everybody! In header I have a big image, and a navbar. What I want: navbar has to exit from vewport, and when I scroll to top it has to slide down, becoming visible. I tried pinning navbar, and using another scrolltrigger to slide it, but: - when pinned navbar does a "glitch", and jump (not a real problem, but ugly to see); - when I scroll to the top of the page, navbar still slided down Sorry for my english, I hope it's all clear.

I haven't been able to simplify the code and do any testing yet, but for now thank you all for your input, I think that's not really gsap related issue.

I tried another approach, pinning the entire section and scrolling the content (also thanks to some pen found around). I like this result, and works well on any resolution, but responsive still not working as expected. Is there a listener or a function I can use to force recalculation? "refreshInit" and refresh() seems not to work (I think I'm doing it wrong). Here new pen: https://codepen.io/smino/pen/jOdgzRP

I updated my original pen, replacing variables with functions, and fixing marker css (I forgot position: relative). The before pseudo class on .marker is a trail of marker (which changes his dimensions due to breakpoints). My primary issue is that resizing browser window, top and bottom gradients don't pin exactly on top/bottom of the trigger section, in some cases it's very wrong. I don't understand if it is an error in my code, or a wrong refresh of scrolltrigger, or else.

Hi, I'm trying to create a section (ideally a timeline). In this section there are 3 parts: 1) "intro": a div pinned 2) "marker" indicates scrolling level of history 3) History: list of milestones Additionally, I'm trying to place two divs (on top and bottom) with a gradient, to give effect to "gradually disappear" on History. I'm not very confident on this code, I think there's a way better to reach same result.. Also, this is not responsive, and my tests with refresh() or kill() doesn't work as expected.