Show-hide Header in Elementor with the GSAP & ScrollTrigger

When I scroll down the page and refresh the page, the header shows and then scrolls away. This seems strange behaviour. How should I tweak the script so the header does not show when scrolled down and page refreshed?

Thank you for the excellent work! It works great of course, the only question I have is this: does this affect the overflow property of the container? because I think it automatically changes to Auto.

Incredible! Do you know how to make the header appear after the scroll? Appear exactly when reaching the second section, if I use the height in VH in the first section?

Thanky you!

This should be a default from elementor headers

Everythings works perfectly but I simply want to invert the action. So basically to show the header on scroll down instead of hiding it. So the header would be hidden when first loaded, but with scrolling down it would appears. Can you help how to do so?

my hamburger style nav menu on mobile and tablet view doesnt seem to work when i create this guide, it doesnt show the nav menus option. Am i missing something pleaaase help

Great tutorial! This works perfeclty. I just had one question: how do I make my header scroll up with page for the first 72px of the page (so not-sticky), and make the function work only after that? Kind of like the SONOS website.

So I followeed you move by move, and purchsed the pack from your store (in case I missed something) and I still can't get this working. What am I missing here?

but it didn t works with GSAP Trigger and LOCOMOTIVE Scroll Feature... :( and in greensock forums i could nothing found about changing the colour from the sticky header

I love Steroids for Elementor. Such a useful plugin. I have a question for this tutorial. The content of the page moves up to the top of the page behind the header. I suppose this is due to making it sticky thus taking it out of the flow. What is the best approach to make the page content jump down 100 px or whatever the height of the header is?

Followed every step ... but code didn't work ... does this need some kind of update?

I did all the steps very carefully and double check everything, check with 3 browsers, and ins't working for me. May you help me please?

Perfect as always, for real! Where do i can find the exact css code to run this?

Hi, thank you for your tutorial !
That doesn't work for me, when i activate LOCOMOTIVE SCROLL, any idea of how to do this effect with locomotive scroll activated ?
thank you

Awosome!! Thanks OOOOOOOOOOOOOH BOY 📈🚀🌀

hi! thank you for sharing your knowladge ( i bought many of your product in gumroad and they also very good!) i hava a quastion: idf in gsap libary i want to add the extra plugins from club greensock what i need to do? could you add this option for steroids? (to club membrs)

Thank you for your tutorial, is it possible, to ajust the position if you scroll down? Issue on big headers, the sticky "top" fire, if content arrive the top - but i need before? any short idea?

I'm trying to use this with Locomotive Scroll but it doesn't work. I've tried what is in your last video about GSAP + Locomotive Scroll but it doesn't work 😔

Hello,
I followed your tutorial on Show-Hide-Header with your locoscroll template. I have enabled locomotive, as well as GSAP and GSAP scroll trigger but I cannot make the show-hide-header work.
Could you please tell me if there is a way to make this work on the locoscroll-by-ooohboi template?
Thanks in advance.
Best,

Please come up with more Custom Code + Elementor combination videos! Damn! You are sooo underrated! Keep up doing fantastic works!

hi man im a new subscriber , i think your channel is so useful . thank you for your content .
but i dont know about the thumbnail images because they all look the same which is something i dont like .
it just make it hard to remember what video i have watched cause they all the same in my opinion .

Not working wth latest elemetor version.

Hi! thank you so much for this video! could you upload a video that explain how to use page transition with barba.js? i know it's possible but i got so lost in the process..

Thanks for your contributions! It would be great in the Steroids for Elementor plugin to include in the HOVERANIMATOR extension a color transition of the fonts and icons!

Please make an upcoming video on how to use Barba.js :D

thank you!!

Love your tutorials, thanks a lot!

PERFECTO!
Keep going my oooboi! Who wouldn't like to play hide-and-seek with his headers anyway...?

You are absolutely awesome! I'm waiting for barba.js tutorial :)))

Great tutorial as always!
Is it possible to create a sticky or show-hide header that will change it's background and font color depending on the underlying section color?
If so, would it be possible to make a tutorial? Thanks

Oh finally I a seeing GSAP integration, loving it man please keep up the great work, love GSAP

Great video, but I am waiting for Barba.js tutorial I was trying to learn how to impliment this in elementor, I saw some website on awaaaard and behance which build on WordPress without elementor who used this JavaScript library and it's looks sooo awesome. Thank you soo much to helping us🙏🏻👍

Thank you so much this helps a lot :)

Thanks ooh boii ... You are the best . You solved my problem ..

Always like videos before even view the title. Keep going bro. In top 🔝

Nice one bro !!! More Elementor videos in future ;-)

mmmmazing, thanks boi.

I love all your video. Amazing.
Do you have a css to change color of header passing gradually from transparent to any color during the scrolling ? Thanks

Great Video as always. Is ist possible to create a megamenue without any Plugin?

Hi! Great stuff as always.
I've noticed that it says Howdy Damir in your WP. Are you from Croatia perhaps?

love these GSAP videos. Keep em coming.

Hey Ooh boi... always excited to get a notification from you 🙂👍🏿

mobile version ?

simply the best

Liked before watching because how awesome your content is ! :)

Great man, good job 🔥