Show-hide Header in Elementor with the GSAP & ScrollTrigger

In this tutorial, I’ll show you how to create that show-hide-header-on-scroll effect in Elementor by using the GSAP and the ScrollTrigger. No Elementor PRO is needed. You are able to download the training file and play with the different settings and effects.
What you need with this tutorial is Elementor, “Steroids for Elementor” and the “Custom CSS and JavaScript” plugins. Enjoy!
-------------------------------------------------- EXTRAS!
If you plan to buy Elementor PRO - buy from this link and help me keep this channel alive!
be.elementor.c...
OoohBoi Steroids for Elementor plugin page:
wordpress.org/...
Visit my Gumroad shop for more cool stuff:
gumroad.com/oo...
The training file:
gum.co/ONAgtM
GSAP & ScrollTrigger:
greensock.com/...
greensock.com/...
greensock.com/...
Copy-paste starter JavaScript code @ Gist:
gist.github.co...
Custom CSS and JavaScript plugin:
wordpress.org/...
You might consider buying me a coffee if you find my work helpful for your business:
www.paypal.me/...
-------------------------------------------------- CREDITS!
-Music: Funky Empire (Loopable) by chilledmusic
Link: filmmusic.io/s...
License: filmmusic.io/s...

[@chrisadam9761]

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

[@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!

[@DigitalDesigns1]

love these GSAP videos. Keep em coming.

[@OoohBoi]

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

[@madarauchiha5433]

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

[@OoohBoi]

Thanks, will do!

[@tonyblack2141]

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

[@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

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

[@lewyathan]

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

[@OoohBoi]

Yay! Thank you!

[@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

[@htmlfivedev]

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

[@DreamerPlayer]

Awosome!! Thanks OOOOOOOOOOOOOH BOY 📈🚀🌀

[@OoohBoi]

You're welcome!

[@moonboy7280]

Thank you so much this helps a lot :)

[@shashikantsingh6555]

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

[@OoohBoi]

Glad to read I did!

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

[@teuccio73]

simply the best

[@user-iy2ts7re4w]

Love your tutorials, thanks a lot!

[@OoohBoi]

Thanks for watching buddy!

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

[@OoohBoi]

That's the plan!

[@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?

[@marks3819]

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

[@OoohBoi]

Will do soon!

[@joaolucaswork]

Great man, good job 🔥

[@OoohBoi]

Thanks 🔥

[@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

[@user-cx5cu3rf1t]

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.

[@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?

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

[@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

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

[@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?

[@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 :)

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

[@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!

[@fuadsyawal7461]

thank you!!

[@OoohBoi]

You're welcome!

[@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?

[@user-mn2dp8yq7f]

mmmmazing, thanks boi.

[@OoohBoi]

Any time!

[@flekz384]

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

[@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 ),

[@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

[@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?

[@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

[@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 :)

[@blazybranding]

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?

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

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

[@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/

[@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/

[@arturo5050]

This should be a default from elementor headers

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

[@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

[@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..!