Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

2

Answers


  1. 0

    Simple CSS Approach

    This might not be the answer you are looking for if you DO NEED to create it using JavaScript and GSAP.

    If not: usually, you can achieve that in a more simple way using CSS media queries.

    If you want the scroll to only happen when the device width > 1200px I assume the overflow only exists from that point on, so this simple CSS would achieve what you are aiming for.

    .container {
/*set containers width to match window/device width*/
width: 100%; 

/*initially hide horizontal overflow in case it exists,*/ 
/*since inherently do not want horizontal scrolling*/
overflow-x: hidden; 
}

@media only screen and (min-width: 1200px){
/*if device's width is >=1200px*/

.container {

/*prevents line breaks -> avoids wrapping*/
/*so that children do not move down*/
white-space: nowrap;

overflow-x: scroll;  /*activate scroll*/
}
    <div class="container">
  <div>
This is a child element
  </div>
</div>

    I do not think you can resize the output window here so I made a jsFiddle so you can see it in action (I may be mistaken but just to be sure).

    There I used a Lorem Ipsum text just to emulate the overflow. Here I removed it to avoid unnecessary scrolling in my answer, since resizing would not be possible anyways.

    Code Notes

    With this code the scrollbar will appear as soon as the width hits 1200px. If you want it to happen specifically only when >1200px, than just change the 1200px in the media query for 1201px.

    Why CSS over JavaScript?

    It avoids the overhead that JavaScript solutions might introduce for handling scrolling behavior, especially on larger sites. Which leads to a better performance.

    Learn More

    Login or Signup to reply.
  2. 0

    simple answer will be

    if (window.innerWidth > 1200) {
   ... // do whatever you want
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search