imamiddin

I am usoing this in my project so gsap.registerPlugin(ScrollTrigger); ScrollTrigger.saveStyles(".sticky-container"); /*** Different ScrollTrigger setups for various screen sizes (media queries) ***/ ScrollTrigger.matchMedia({ "(min-width: 768px)": function() { let sections = gsap.utils.toArray(".box-container .hm-animation-sec"); gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".sticky-container", pin: true, // start: "top +=0px", start: "top 0%", markers: false, scrub: 2, snap: { snapTo: 1 / (sections.length - 1), duration: {min: 0.1, max: 0.3}, delay: 0 }, end: "+=2500", } }); }, // mobile "(max-width: 767px)": function() { let sections = gsap.utils.toArray(".box-container .hm-animation-sec"); gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".sticky-container", pin: true, pinSpacing: true, // start: "top +=0px", start: "top 0%", markers: false, scrub: 1, snap: { snapTo: 1 / (sections.length - 1), duration: {min: 0.2, max: 0.2}, delay: 0 }, // end: () => "+=" + (document.querySelector(".container").offsetWidth / 5) end: "+=2500" } }); }, // all "all": function() { } });

i am using Gsap scroll trigger on horizontal scroll andscrollify jquery function for section slide. the issue is when we back bottom section to gsap section its trigger scroll without any mouse event fire