Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Set Horizontal Trigger only at 1100px or larger?

Recommended Posts

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:



    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


Link to comment
Share on other sites

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).



  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.