emco

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

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