emco Posted October 28, 2021 Share Posted October 28, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted October 28, 2021 Share Posted October 28, 2021 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! 1 Link to comment Share on other sites More sharing options...
emco Posted October 28, 2021 Author Share Posted October 28, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted October 28, 2021 Share Posted October 28, 2021 Can you make a minimal demo? It's nearly impossible to troubleshoot scrolling problems from a code snippet. And it doesn't even look like you are initializing loco scroll. I'm really unsure if you should be doing this... loco_scroll = window.sfe_loco_scroll; 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now