Show-hide Header in Elementor with the GSAP & ScrollTrigger

[@chrisadam9761]

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

[@htmlfivedev]

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

[@akiburrahman8051]

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

[@OoohBoi]

Believe it or not, 99% of people asked me to cut that kind of tutorials. I guess I went too far ahead.

[@akiburrahman8051]

@@OoohBoi There are many people who loves that as well.. Carry it on.. And thanks a lot!

[@alechef69]

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

[@OoohBoi]

Yes, you just have to add another property to animate which is the opacity. Like this: const show_hide_header = gsap.from( site_header, { yPercent: -100, opacity: 0, duration: 0.25, ease: "sine.out", } ).progress( 1 );

[@alexandersebastian3360]

@@OoohBoi Dude, this is amazing! I tried adding just the opacity into the code section already in place ( opacity: 0, ) but it doesn't seem to have changed. the background opacity. do i need to setup a "gsap.to" with opacity:1,? Sorry I'm still learning :)

[@PintoTV]

Great tutorial OB! Quick question, I have 2 containers with this order: 1. The hide & show 2. Main Header How i can hide the top container that will not show when the page loads, and will hide and show like here in the video?

[@ΚωνσταντίνοςΔασκαλόπουλος-γ8σ]

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.

[@eosfischer]

Hey, let me just say your stuff is brilliant, we use it all the time! Though this time I found something that can do what you show here, but it's much more simple, no Java required! .header-sticky { transform: translatey(-80px); opacity: 0; -moz-transition: all .3s ease!important; -webkit-transition: all .3s ease!important; transition: all .3s ease!important; } .elementor-sticky--effects.header-sticky { opacity: 1; height: auto!important; transform: translatey(0px); } It's completely simple really: simply give to whatever section you want the CSS class ".header-sticky", and make sure to set the Sticky Effects Offset to something more than 0, lets say 300. The section will be invisible while you are on top of the page, and appear when you do down (note the opacity in the CSS). Saw it in this video I think, do check that one out as well for more info! kzbin.info/www/bejne/bWilhoKpjp6eraM

[@OoohBoi]

OK, fair enough!

[@casperpost2557]

Doesn't that do something quite different though? Your code only shows and hides a header when you scroll down from the top of the page. The code from this video shows and hides the header when you scroll up or down, no matter where you are on the page.

[@madarauchiha5433]

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

[@OoohBoi]

Thanks, will do!

[@supadraak4648]

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

[@OoohBoi]

You should provide more details so I can figure out what MIGHT be wrong. But when you just say "this doesn't work" then I can't help buddy. Did you check the browser's console (developer tools) for errors?

[@emir9822]

@@OoohBoi he told you that this not work with LOCOMOTIVE Scroll enabled, for my website it doesn t work aswell with Locomotive Scroll because the sticky part is not affected the scroll..

[@hafid.g]

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

[@hafid.g]

I want to ask something pls, i have a transparent background by default, and i want to change the color to grey per exemple when it is direction === -1. How to do it or where should i insert the background-color. Thank you

[@hafid.g]

Update : I decided to change the transparent header to black transparent. So, I'm fine now. Keep going

[@BrunoSouza]

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!

[@tonyblack2141]

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

[@emir9822]

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

[@gillessmet]

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.

[@OoohBoi]

Find the ... ScrollTrigger.create( { ...line first, it should be closer to the bottom... right after that line is another one which defines the START position of the trigger event, something like... start: "top top-=" + site_header.offsetHeight, ... just add required offset to the end... start: "top top-=" + ( site_header.offsetHeight + 72 ),

[@katrinasangalang941]

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

[@djkasperg]

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?

[@amx507]

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?

I've been trying for days to do this, but I can't find a current tutorial :(( Does anyone have a recent code? I can't find a way to make Locomotive Scroll work with this plugin. Please help! I'm desperate.

[@kristofgheyssens3941]

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?

[@JG-zy6br]

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 😔

[@OoohBoi]

You have to be sure to know what you're doing, please do some quick research with Google! Locomotive Scroll does hijack the browser scroller, and if you want to use it with the GSAP/ScrollTrigger - you'll have to use the workaround. I have also talked about in my previous video: kzbin.info/www/bejne/mZSqoZasnpKnaqM

[@Digi.B]

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

[@OoohBoi]

That's definitely possible! I advise you to go to the GreenSock forum and start the topic. Maybe there is already a topic on that subject!

[@Digi.B]

@@OoohBoi I am sure you'd make a much better tutorial 😁

[@Digi.B]

@@OoohBoi This one? greensock.com/forums/topic/27271-gsap-locomotive-scroll-sticky-header-not-working/?tab=comments#comment-133450

[@DDesigner123]

love these GSAP videos. Keep em coming.

[@OoohBoi]

Like I mentioned in the video, there will be more!

[@lewyathan]

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

[@OoohBoi]

Yay! Thank you!

[@eliasbermeo9549]

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!

[@OoohBoi]

The problem is how the particular type of widget is structured html-wise ! It's hard to make an exception while there are zillions of widgets (including the third-party ones) out there.

[@krisr5976]

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?

[@OoohBoi]

Did you get my latest message/email?

[@acalsmo]

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)

[@OoohBoi]

Thanks for your purchase buddy!!! All of the "club members" GSAP plugins can't become a part of the SFE due to the license nature, as simple as that. If you want to enqueue them on your own, you'll have to use your currently active (child) theme functions file. I'm talking about the WordPress enqueuing, like this: developer.wordpress.org/themes/basics/including-css-javascript/

[@jean-sebastienvalderrama8404]

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,

[@OoohBoi]

My friend, you gotta have a basic understanding of what the Loco Scroll is... in just a few words, you can't do something like that because the Loco Scroll hijacks the scroller. Literally! And then everything else scroll-related hangs, it loses connection with the scroller position.

[@sgo7806]

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

[@OoohBoi]

I'm not sure, the menu is somewhat dynamic thing. But I don't exclude it as a possibility.

[@borealbrands]

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?

[@OoohBoi]

Are there any JS errors in the browser Console?

[@shashikantsingh6555]

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

[@OoohBoi]

Glad to read I did!

[@casperpost2557]

Thank you so much Oooh Boi for this video and all the amazing other ones! Your plugin and video's are amazing content. I'll be buying you a cup of coffee soon! BTW. I managed to tweak the code a little bit so it works for a (mobile) bottom menu as well. If anyone wants to have the code, send me a message. KZbin wont let me upload it here in the comment section.

[@tehzeyoung755]

Heyy, can I have the code. Thanks in advance !

[@casperpost2557]

For some reason youtube wont let me post the code in any way. I cant even link to a page where I put the code... Do you know a solution?

[@katrinasangalang941]

@@casperpost2557 Hi casper how can we know the code？ when i put it in a mobile／tablet mode the hamburger menu doesnt work and there is no option to show the header options when putting it in a mobile and tablet view. pleaaase help

[@adammetwaly4337]

hey mate was hoping to get that code

[@adammetwaly4337]

@@katrinasangalang941 hey did you end up fixing this issue? Im running into that same problem

[@giginet1992]

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..

[@OoohBoi]

Will do that soon. Essentially, you'll need the child theme in order to modify HEADER and FOOTER of the theme because Barba requires two data-attributes and the page transition/animation container. On top of that, Elementor includes the particular page styles "dynamically", and which is kinda bad with Barba hence the fact both Header and Footer are loaded only once throughout entire website. Here's something that might help a bit : thisisadvantage.com/page-transitions-using-barba-js-wordpress-elementor/

[@flekz384]

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

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

[@OoohBoi]

That's the plan!

[@druckenpumpe]

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

[@ljubov_studio]

Jeste.

[@OoohBoi]

Da :)

[@marks3819]

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

[@OoohBoi]

Will do soon!

[@omranalkhleefalhamad6756]

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 .

[@meksone017]

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

[@jonathanthomas8263]

yes please

[@OoohBoi]

Thanks buddy! I'll try to make one as soon as possbile.

[@HaseebKhalid]

Not working wth latest elemetor version.

[@OoohBoi]

It has absolutely nothing to do with the version of Elementor. Not even a tiny little bit.

[@HaseebKhalid]

@@OoohBoi Oh Ok but I have to uninstall it every time otherwise elementor does not work. Maybe something else creating issues anyway learning lot from you. Thanks for sharing your knowledge.

[@OoohBoi]

@@HaseebKhalid Just use "Hello Elementor" theme to eliminate your currently active theme as a troublemaker. All of my tuts are done with "Hello Elementor" so I'm 100% positive that it works.

[@DreamerPlayer]

Awosome!! Thanks OOOOOOOOOOOOOH BOY 📈🚀🌀

[@OoohBoi]

You're welcome!

[@КонстантинК-ю1м]

Love your tutorials, thanks a lot!

[@OoohBoi]

Thanks for watching buddy!

[@moonboy7280]

Thank you so much this helps a lot :)

[@joaolucaswork]

Great man, good job 🔥

[@OoohBoi]

Thanks 🔥

[@teuccio73]

mobile version ?

[@OoohBoi]

Just resize browser's window. But if you ask about the menu, that's not the real menu anyway. You can check another video of mine on how to create the perfect header template: kzbin.info/www/bejne/sIC0f2hoa5mJm9U

[@fuadsyawal7461]

thank you!!

[@OoohBoi]

You're welcome!

[@teuccio73]

simply the best

[@arturo5050]

This should be a default from elementor headers

[@יגאלבאוך-ר2ה]

mmmmazing, thanks boi.

[@OoohBoi]

Any time!

[@LuckyGamage]

Wow..! Nice article..! Your plugin has helped me a lot sir..! But now i am in a big trouble. I installed oohoi plugin with elementor Hello theme. And I activated Locomotive scroll. Worked well..! But when I tried to insert show-hide header, it is not working at all. I also used the code in your following video kzbin.info/www/bejne/mZSqoZasnpKnaqM&t , but it didn't work. Can you please help me sir..? I don't know how to do this using GSAP + ScrollTrigger + Loco. Thank you..!