how can i tell gsap and js to do something ONLY IF width is above 1200px?

Question

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();
};

Answer 1

Depending on what exactly your goals are, you can use gsap.matchMedia to control at what client size a given set of instructions run, and choose to run them when the browser is resized to the desired width.

const aboutContainer = document.querySelector(".about__container");
const aboutContent = gsap.utils.toArray(".about__container .about__content");
const aboutMask = document.querySelector(".about__mask");

let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {
  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();
  return () => {
    // optional cleanup instructions?
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<div class="about__container">
  <div class="about__content">
    About Content
    <div class="about__section">
  </div>
  About Container
</div>
<div class="about__mask">About Mask</div>

boilerplate code for matchMedia from here: https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/