[GSAP Trigger don t working with Locomotive Scroll]

21 minutes ago, GreenSock said:

Welcome to the forums, @emco. Are you saying that you added LocomotiveScroll to your page and then it broke? LocomotiveScroll is not a GreenSock product and it applies scroll-jacking, so you'd need to do some work to connect it to ScrollTrigger - that's why we created the .scrollerProxy() method. There's a demo in the docs. 

 

If you have any GSAP-specific questions, feel free to post them here along with a minimal demo. (We can't effectively troubleshoot live sites). 

 

Happy tweening/scrolling!

 

So i understand you, thank you for your answer.

 

But i could not understand how to implement the Scroller.proxy in my actually Code.

 

My Code looks like that actually:

 

<script>

;( function() {


  let loco_scroll = {};

  let chck_if_gsap_loaded = setInterval( function() {

     if( window.sfe_loco_scroll && Object.keys( window.sfe_loco_scroll ).length !== 0 && window.gsap && window.ScrollTrigger ) {


    loco_scroll = window.sfe_loco_scroll;

     gsap.registerPlugin( ScrollTrigger );


     show_hide_header();

   clearInterval( chck_if_gsap_loaded ); 

       


        }



    



      }, 500 );



  



     function show_hide_header() {



       



       /* DON'T CHANGE THIS */    



       // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)   



        loco_scroll.on('scroll', ScrollTrigger.update);



       ScrollTrigger.scrollerProxy('.sfe-locomotive-scroll-wrapper', {



       scrollTop(value) {       



         return arguments.length ? loco_scroll.scrollTo(value, 0, 0) : loco_scroll.scroll.instance.scroll.y;


         }, 


         getBoundingClientRect() {

           return {

             top: 0,          

             left: 0,         


             width: window.innerWidth,          



             height: window.innerHeight,

         };     



         },


    const site_header = document.querySelector( "#ob-site-header" );

    const show_hide_header = gsap.from( site_header, {

    yPercent: -100, 


        duration: 0.38, 


        ease: "power2.Out",

   } ).progress( 1 );
  

  ScrollTrigger.create( {


    scroller: '.sfe-locomotive-scroll-wrapper', 

      start: "top top-=" + 100, 

        onUpdate: ( self ) => {


          if( self.direction === -1 ) show_hide_header.play();

            else show_hide_header.reverse();

          }

    } );



       


       //THIS NEED EVEN TO SET UP FOR THE LOCOMOTIVE SCROLL TO MAKE IT WORK



       ScrollTrigger.addEventListener( 'refresh', () => loco_scroll.update());  



       ScrollTrigger.refresh();

  }
} )();

     

</script>

 

Can you please help me how to modife it with the .scrollerProxy() method

 

[GSAP Trigger don t working with Locomotive Scroll]

If i use the Smooth Scroll on my Homepage with the Show and Hide Gsap Trigger Header it doesn t work, it seems there is an conflict.

 

But i cannot figure out, how to solve it.

I am using Wordpress with Elementor.

This is my Website: https://trustedinfo.de

If i active the SmoothScroll Locomotive the Gsap Trigger Header don t working more..

 

please help me there out

 

Edit:

 

this is my GSAP Trigger SHOW and HIDE Header Javascript Code:

 

;( 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( "#ob-site-header" );
    
    const show_hide_header = gsap.from( site_header, {
    
    	yPercent: -100, 
      	duration: 0.38, 
        ease: "power2.Out",
    
    } ).progress( 1 );
    
    ScrollTrigger.create( {
    
    	start: "top top-=" + 100, 
      	onUpdate: ( self ) => {
        
        	if( self.direction === -1 ) show_hide_header.play();
          	else show_hide_header.reverse();
        
        }
    
    } );
  	
  }
  
} )();

CSS of SHOW and HIDE Header:

 

body:not(.elementor-editor-active) #ob-site-header {
	position: fixed;
  	z-index: 999;
  	width: 100%;
}

 

best regards

Emco