Set Horizontal Trigger only at 1100px or larger?

[CreateSean]

This is my first project using greensock and my javascript skills are rather weak.

 

I've implemented horizontal scroll found here and this is working great. However I dont' want horizontal scroll below 1100 pixels. What is the best way to do that?

 

current code:

 

    gsap.registerPlugin(ScrollTrigger)

    let container = document.getElementById("chapter-wrapper");

    gsap.to(container, {
      x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
      ease: "none",
      scrollTrigger: {
        trigger: container,
        invalidateOnRefresh: true,
        pin: true,
        scrub: 1,
        end: () => "+=" + container.offsetWidth
      }
    })

 

[akapowl]

Hey @CreateSean - welcome to the GSAP forum.

 

What you're looking for is ScrollTrigger.matchMedia()

 

It will help you manage different ScrollTriggers for different screensizes - you will still have to make sure your page is set up properly for those different screensizes, though - things laid out horizontally for above your 1100px and laid out vertically for below that.

 

Maybe this thread can help you get started - happy scrolling (and happy holidays).

 

 

[CreateSean]

@akapowl ,

Thank you. that helped a lot.