if ( document.querySelector( '.horiz-gallery-wrapper' ) ) { gsap.registerPlugin( ScrollTrigger, ScrollSmoother ); const header = document.querySelector('header.wp-block-template-part'); ScrollTrigger.create({ trigger: document.body, start: 'top top', end: 'bottom bottom', onUpdate: (self) => { if (self.progress > 0 && self.progress < 0.9) { header?.classList.add('transparent'); } else { header?.classList.remove('transparent'); } } }); const mm = gsap.matchMedia(); mm.add('(min-width: 1000px)', () => { const smoother = ScrollSmoother.create( { content: document.querySelector( '.gallery-wrapper' ), smooth: 2, normalizeScroll: true, ignoreMobileResize: true, preventDefault: true, } ); const horizontalSections = gsap.utils.toArray( '.horiz-gallery-wrapper' ); horizontalSections.forEach( function( sec, i ) { const pinWrap = sec.querySelector( '.horiz-gallery-strip' ); let pinWrapWidth; let horizontalScrollLength; function refresh() { pinWrapWidth = pinWrap.scrollWidth; horizontalScrollLength = pinWrapWidth - window.innerWidth; } refresh(); gsap.to( pinWrap, { scrollTrigger: { scrub: true, trigger: sec, pin: sec, start: 'center center', end: () => `+=${ pinWrapWidth }`, invalidateOnRefresh: true, }, x: () => -horizontalScrollLength, ease: 'none', } ); ScrollTrigger.addEventListener( 'refreshInit', refresh ); } ); }) }