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