About
Services
Click Here
(function() { if (document.readyState === 'complete') { initImageSwap(); } else { window.addEventListener('load', initImageSwap); } function initImageSwap() { console.log('Initializing image swap...'); gsap.registerPlugin(ScrollTrigger); const images = [ 'https://stephenboss.com/wp-content/uploads/2026/07/boss-embauhaus.webp', 'https://stephenboss.com/wp-content/uploads/2026/07/boss-zyncho.webp', 'https://stephenboss.com/wp-content/uploads/2026/07/boss-chubbet.webp' ]; const imgElement = document.getElementById('dynamic-image'); if (!imgElement) { console.error('Image element not found!'); return; } const wrapper = imgElement.closest('.image-swap-wrapper'); if (!wrapper) { console.error('Wrapper not found!'); return; } let currentIndex = 0; let isTransitioning = false; images.forEach(src => { const img = new Image(); img.src = src; }); imgElement.src = images[0]; ScrollTrigger.create({ trigger: wrapper, start: "top top", end: "+=300%", pin: true, scrub: 1.2, markers: false, onUpdate: function(self) { const progress = self.progress; const newIndex = Math.min(Math.floor(progress * images.length), images.length - 1); if (newIndex !== currentIndex && !isTransitioning) { isTransitioning = true; currentIndex = newIndex; gsap.to(imgElement, { opacity: 0, scale: 0.92, duration: 0.4, ease: "power2.inOut", onComplete: function() { imgElement.src = images[currentIndex]; gsap.to(imgElement, { opacity: 1, scale: 1, duration: 0.5, ease: "power2.out", onComplete: function() { isTransitioning = false; } }); } }); } } }); setTimeout(() => ScrollTrigger.refresh(), 1000); } })();