Hello,
I have an issue with the website I am creating on Elementor. The template used here has locomotive scroll, GSAP and GSAP Scroll Trigger activated. Several elements are present on this template, which are animated and working as expected. Nevertheless, I can’t find a way to add a show-hide header. I tried many different combinations.
When I am editing mode I see the header, but when I go on Preview mode the header doesn’t show up.
New to this type of development, I would appreciate your help.
I used the CSS ID on my header, #maria-header, I completed the code CSS and the javascript below:
I appreciate the time you take to read and answer me.
Best,
#maria-header {
display: flex;
position: fixed;
z-index: 999;
width: 100%;
}
<script>
;( function() {
// wait until gsap & ScrollTrigger available
let chck_if_gsap_loaded = setInterval( function() {
if( window.gsap && window.ScrollTrigger ) {
// register scrolTrigger
gsap.registerPlugin( ScrollTrigger );
// ... do your thing
show_hide_header();
// clear interval
clearInterval( chck_if_gsap_loaded );
}
}, 500 );
function show_hide_header () {
const site_header = document.querySelector( "maria-header" );
const show_hide_header = gsap.from( site_header, {
yPercent: -100,
duration: 0,25,
ease: "sine.out",
} ).progress( 1 );
ScrollTrigger.create({
start: "top top-=" + 100,
onUpdate: ( self ) => {
if( self.direction === -1 ) show_hide_header.play();
else show_hide_header.reverse();
}
});
}
} )();
</script>
