DicedMango

hi i will try one at a time, this is the section with the js error. https://codepen.io/GreenSock/pen/aYYOdN

@GSAP Helper thank you for your response. I can upload screenshots of each section where the errors are.

Hello GSAP community, I'm encountering an issue where multiple GSAP animations are not functioning as expected on Safari, while they work perfectly fine on Chrome and Firefox. I've tested the animations on Safari and noticed that they fail to run or display unexpected behavior. Here is a simplified version of the code I'm using for the animations: I have confirmed that I'm using GSAP version 3.11.2, and I have also verified that I'm using the latest version of Safari. Specifically, the animations I'm having trouble with are carousel layers all stacked and getting an error only in safari ReferenceError: Can't find variable: activeIndex. gsap.registerPlugin(Draggable, InertiaPlugin, SplitText); /* H E R O T E X T */ document.addEventListener('DOMContentLoaded', function() { var textElements = document.querySelectorAll('.hero-catagory-text'); gsap.set(textElements, { y: '-100%' }); var tl = gsap.timeline({ repeat: -1 }); textElements.forEach(function(element, index) { var duration = 0.7; tl.to(element, { y: '0%', duration: duration, ease: 'cubic-bezier(0.25, 0.1, 0.28, 1.11)' }) .to(element, { y: '100%', duration: duration, delay: 0.7, ease: 'cubic-bezier(0.25, 0.1, 0.28, 1.11)' }); }); tl.play(0); }); /* S E R V I C E C A R O S U E L */ const carousel = document.querySelector('.carousel'); if (carousel !== null) { const services = Array.from(carousel.querySelectorAll('.service')); let activeIndex = 0; function updateClasses() { services.forEach((service, index) => { if (index === activeIndex) { service.classList.add('service-active'); service.classList.remove('service-previous', 'service-next'); service.classList.remove('hidden'); gsap.to(service.querySelector('.service-img'), { x: '0%', y: '0%', scale: 1, duration: 1, }); } else if (index === (activeIndex - 1 + services.length) % services.length) { service.classList.remove('service-next', 'service-active'); service.classList.add('service-previous'); service.classList.remove('hidden'); gsap.to(service.querySelector('.service-img'), { scale: 0.4, x: window.innerWidth <= 768 ? '110%' : '57%', y: window.innerWidth <= 768 ? '-10%' : '30%', duration: 1, }); } else if (index === (activeIndex + 1) % services.length) { service.classList.remove('service-previous', 'service-active'); service.classList.add('service-next'); service.classList.add('hidden'); gsap.to(service.querySelector('.service-img'), { x: '0%', y: '0%', scale: 0, duration: 1, }); } else { service.classList.remove('service-previous', 'service-next', 'service-active'); service.classList.add('hidden'); } }); } function rotateCarousel() { const previousIndex = activeIndex; const nextIndex = (activeIndex + 1) % services.length; activeIndex = nextIndex; gsap.to(services[nextIndex].querySelector('.service-img'), { scale: 0.25, duration: 1, }); gsap.to(services[previousIndex].querySelector('.service-img'), { scale: 0.25, duration: 1, }); gsap.to(services[activeIndex].querySelector('.service-img'), { scale: 1, duration: 1, }); updateClasses(); // Slide animation gsap.fromTo( services[previousIndex], { x: 0 }, { x: '-100%', duration: 1, ease: 'power3.inOut' } ); gsap.fromTo( services[activeIndex], { x: '100%' }, { x: 0, duration: 1, ease: 'power3.inOut' } ); } rotateCarousel(); setInterval(rotateCarousel, 6000); } /* T E S T A M O N I A L */ const testamonialCarousel = document.querySelector('.testamonial-carosuel'); if (testamonialCarousel !== null) { var slideDelay = 4; var slideDuration = 1; var snapX; var slides = document.querySelectorAll(".slide"); var autoPlayLimit = slides.length * 2; var autoPlayCount = 0; var prevButton = document.querySelector("#prevButton"); var nextButton = document.querySelector("#nextButton"); var progressWrap = gsap.utils.wrap(0, 1); var numSlides = slides.length; gsap.set(slides, { xPercent: i => i * 100 }); var wrap = gsap.utils.wrap(-100, (numSlides - 1) * 100); var timer = gsap.delayedCall(slideDelay, autoPlay); var animation = gsap.to(slides, { xPercent: "+=" + (numSlides * 100), duration: 1, ease: "none", paused: true, repeat: -1, modifiers: { xPercent: wrap } }); var proxy = document.createElement("div"); var slideAnimation = gsap.to({}, {}); var slideWidth = 0; var wrapWidth = 0; resize(); var draggable = new Draggable(proxy, { trigger: ".slides-container", inertia: true, type: "x", onPress: updateDraggable, onDrag: updateProgress, onThrowUpdate: updateProgress, snap: { x: snapX } }); window.addEventListener("resize", resize); prevButton.addEventListener("click", function() { animateSlides(1); }); nextButton.addEventListener("click", function() { animateSlides(-1); }); function updateDraggable() { timer.restart(true); slideAnimation.kill(); this.update(); } function animateSlides(direction) { timer.restart(true); slideAnimation.kill(); var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth); slideAnimation = gsap.to(proxy, { x: x, duration: slideDuration, onUpdate: updateProgress }); } function autoPlay() { if (draggable.isPressed || draggable.isDragging || draggable.isThrowing) { timer.restart(true); } else { autoPlayCount++; if (autoPlayCount < autoPlayLimit) { animateSlides(-1); } } } function updateProgress() { animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth)); } function resize() { var norm = (gsap.getProperty(proxy, "x") / wrapWidth) || 0; slideWidth = slides[0].offsetWidth; wrapWidth = slideWidth * numSlides; snapX = gsap.utils.snap(slideWidth); gsap.set(proxy, { x: norm * wrapWidth }); animateSlides(0); slideAnimation.progress(1); } } I have already attempted the following steps to troubleshoot the issue: Checked for any console errors or warnings in Safari's developer tools. Verified that I'm using the latest version of GSAP. Reviewed the GSAP documentation for any known issues or compatibility concerns with Safari. Tested the animations in different versions of Safari to see if the issue persists. Despite these efforts, I'm still experiencing the problem exclusively on Safari. I have tried to use webkit-transform instead of transform. If anyone has encountered a similar issue or has any insights into why these animations might not be working as expected on Safari, I would greatly appreciate your assistance. Any suggestions, workarounds, or recommendations would be extremely helpful. Thank you in advance for your time and expertise.