i’m in trouble with a project. I’m trying to create a horizontal scroll with Javascript and GSAP, but only if width is > 1200px. i did a thing and it kinda works, but if i resize the web page to a smaller width it still does the horizontal scroll. srry for my english and please help me!!!
const aboutContainer = document.querySelector(".about__container");
const aboutContent = gsap.utils.toArray(".about__container .about__content");
const aboutMask = document.querySelector(".about__mask");
if (document.body.clientWidth > 1200) {
let scrollTween = () => {
gsap.to(aboutContent, {
xPercent: -100 * (aboutContent.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".about__container",
pin: true,
scrub: 1,
end: "+=3000",
},
});
gsap.to(aboutMask, {
width: "100%",
scrollTrigger: {
trigger: ".about__section",
start: "top left",
scrub: 1,
},
});
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".about__container",
start: "center bottom",
},
});
tl.from(aboutContent, { x: 300, opacity: 0, duration: 1 });
};
scrollTween();
};