Jump to content
GreenSock

roy_rodger

Show-hide Header on Scroll with locomotive-scroll + Gsap "issue"

Recommended Posts

 

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>

 

 
 

Capture d’écran 2021-07-05 à 18.22.59.jpg

Capture d’écran 2021-07-05 à 18.30.25.jpg

Capture d’écran 2021-07-05 à 18.24.06.jpg

Capture d’écran 2021-07-05 à 18.30.20.jpg

Link to comment
Share on other sites

Hey @roy_rodger.

 

For using ScrollTrigger alongside locomotive-scroll you will have to hook it up via scrollerProxy.

There is a demo on the docs page showing an example with locomotive-scroll, containing everything important with comments.

 

I have no experience with Elementor or Wordpress, but you will likely want to implement it in that custom script you have after locomotive scroll was initialized and before you create your ScrollTriggers - well, essentially you will want to try and keep the order of when to do what as it is in that demo.

 

Also - and this can easily be overseen - you will have to specifically set a scroller for your ScrollTriggers (which is the container loco-scroll is initialized on).

 

Hope this helps - welcome to the forums!

  • Like 3
Link to comment
Share on other sites

Hi, I feel like I'm on thin ice here, as I really don't want to sound condescending or anywhere near it.
 

I work with WordPress a lot, and (for a lot of reasons) I try to avoid Elementor... But that's not the point here.

 

I just wanted to ask for your 'workflow', as I have the strong feeling that you will have a very steep learning curve trying to handle you problem the way you do right now. There may be very good reasons to takle it that way, but sometimes - in my experience - it is worth taking a step back and evaluate if changing you approach would help you solve the problem at hand better.

 

My reasoning is, that for one Elemetor was meant to work "without coding" (which often is wishful thinking once you want things you way - :) ) so maybe you could keep Elemetor out of that particular peace of you template? 

The other thing is that Elemetor is fighting (as far as I can tell) an uphill battle against evolving Guttenberg and know-how built up for Elemetor might be for naught soon. Of course there might be a million good reasons to go exactly the rout you're trying to go, but if some of my reasoning sound interesting to you, changing the approach might be worth a thought.

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×