Is there a way to instruct gsap and js to execute a certain task solely when the width exceeds 1200px?

Question

Is there a way to instruct gsap and js to execute a certain task solely when the width exceeds 1200px?

Having some trouble with my project. I'm attempting to implement a horizontal scroll using Javascript and GSAP, but only if the width is greater than 1200px. I've managed to get it working somewhat, but when I resize the webpage to a smaller width, the horizontal scroll remains. Apologies for any language issues and would appreciate any help!

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

javascript html jquery css gsap

Answer 1

Answer №1

If you have specific goals in mind, gsap.matchMedia allows you to control when a set of instructions should run based on the client size and browser width. You can choose to execute certain actions only when the browser is resized to the desired dimensions.

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

// define a media query. The specified function will be executed when the condition is met
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 () => {
    // any optional cleanup tasks here?
  }
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9beaab8a999eaf7e8ebf7ec">[email protected]</a>/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5c485a4b7b08150a09150e">[email protected]</a>/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>

For the boilerplate code for matchMedia, visit:

Answer 2

If you have specific goals in mind, gsap.matchMedia allows you to control when a set of instructions should run based on the client size and browser width. You can choose to execute certain actions only when the browser is resized to the desired dimensions.

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

// define a media query. The specified function will be executed when the condition is met
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 () => {
    // any optional cleanup tasks here?
  }
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9beaab8a999eaf7e8ebf7ec">[email protected]</a>/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5c485a4b7b08150a09150e">[email protected]</a>/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>

For the boilerplate code for matchMedia, visit:

Answer 3

Answer №2

Effortless Styling with CSS

If you are not keen on using JavaScript and GSAP to achieve the desired effect, then this simple CSS method might be just what you need.

In case you prefer simplicity: typically, utilizing CSS media queries can offer a more straightforward solution.

To restrict scrolling to only occur when the screen width is greater than 1200px, assuming overflow starts at that point, this uncomplicated CSS approach will get the job done efficiently.

.container {
/*adjust container width to match device/screen width*/
width: 100%; 

/*initially hide horizontal overflow to prevent unnecessary scrolling*/
overflow-x: hidden; 
}

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

.container {

/*prevent line breaks to maintain element alignment*/
white-space: nowrap;

overflow-x: scroll;  /*enable horizontal scroll*/
}

<div class="container">
  <div>
This content represents a child element
  </div>
</div>

As I cannot adjust the output window size here, I have created a jsFiddle demonstration for you to observe how it works live (just to be certain).

In the demo, I utilized a sample Lorem Ipsum text to simulate the overflow. Here, its exclusion prevents unnecessary scrolling within this response section.

Detailed Explanation of the Code

By implementing this code snippet, the scrollbar will become visible once the viewport width reaches 1200px. To trigger it precisely only above 1200px, adjust the media query to target 1201px.

Why Prefer CSS over JavaScript?

Using CSS eliminates any potential performance issues associated with JavaScript solutions handling scroll behaviors, particularly on extensive websites, resulting in improved overall performance.

Effortless Styling with CSS

If you are not keen on using JavaScript and GSAP to achieve the desired effect, then this simple CSS method might be just what you need.

In case you prefer simplicity: typically, utilizing CSS media queries can offer a more straightforward solution.

To restrict scrolling to only occur when the screen width is greater than 1200px, assuming overflow starts at that point, this uncomplicated CSS approach will get the job done efficiently.

.container {
/*adjust container width to match device/screen width*/
width: 100%; 

/*initially hide horizontal overflow to prevent unnecessary scrolling*/
overflow-x: hidden; 
}

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

.container {

/*prevent line breaks to maintain element alignment*/
white-space: nowrap;

overflow-x: scroll;  /*enable horizontal scroll*/
}

<div class="container">
  <div>
This content represents a child element
  </div>
</div>

As I cannot adjust the output window size here, I have created a jsFiddle demonstration for you to observe how it works live (just to be certain).

In the demo, I utilized a sample Lorem Ipsum text to simulate the overflow. Here, its exclusion prevents unnecessary scrolling within this response section.

Detailed Explanation of the Code

By implementing this code snippet, the scrollbar will become visible once the viewport width reaches 1200px. To trigger it precisely only above 1200px, adjust the media query to target 1201px.

Why Prefer CSS over JavaScript?

Using CSS eliminates any potential performance issues associated with JavaScript solutions handling scroll behaviors, particularly on extensive websites, resulting in improved overall performance.

Is there a way to instruct gsap and js to execute a certain task solely when the width exceeds 1200px?

Answer №1

Answer №2

Effortless Styling with CSS

Why Prefer CSS over JavaScript?

Further Reading Resources

Similar questions

Attempting to apply the text-shadow CSS property with the help of jQuery

The CSS component located just below the dropzone

Implementing a method for JQuery event handlers to access variables within a module pattern

Issue with Bootstrap4 Carousel not scrolling horizontally

Using the Bootstrap 3 class visible-lg will cause the span to be placed on a separate line

Encase a group of child elements within a parent container using

State changes not affecting the sorting of React elements

Optimal method for implementing $scope.$apply(); or $scope in scenarios outside of Angular when working with Angular Components

What is the best way to create a sleek typewriter effect transition by hovering between tabs?

What is the best method for managing an event loop during nested or recursive calculations?

Issue with Saving Query Loop Results in Prisma MySQL with NextJS/ReactJS

What can be done to stop the event handler from executing?

Transforming Angularjs into Vuejs

Creating a unique custom shape for Bootstrap navigation bar

Using AJAX in a loop iteration

Obtaining the current value with each keystroke

What is the method for defining field names in Highcharts?

Illuminate the current page

Exploring Node troubleshooting with WebPack and Feathers

Sending data to the server using AJAX with a Django form