Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
aki-sol

Disable scrollTrigger on Desktop

Go to solution Solved by OSUblake,

Recommended Posts

Hi,

 

I'm back at it again and need some help understanding what is going wrong. I want my scrollTrigger to only be active on mobile devices. Thus, I created the scrollTrigger animation within a media query. As I understand the documentation my implementation should work but it obviously doesn't 🙃 I'm having trouble understanding where I'm going wrong this time ://

See the Pen gORNrvW by aki-sol (@aki-sol) on CodePen

Link to comment
Share on other sites

  • Solution

Hi aki,

 

You should always check the console for errors. Your code needs to be wrapped with a function.

 

ScrollTrigger.matchMedia({
  "(max-width: 300px)": function() {
    gsap.to(block, {
      xPercent: -100 * (block.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: container,
        start: "top top",
        markers: true,
        end: () => "+=2320",
        pin: true,
        scrub: 0.1,
        inertia: false,
        snap: {
          snapTo: 1 / (block.length - 1),
          ease: "linear"
        }
      }
    })
  }      
})

// OR
ScrollTrigger.matchMedia({
  "(max-width: 300px)"() {
    gsap.to(block, {
      xPercent: -100 * (block.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: container,
        start: "top top",
        markers: true,
        end: () => "+=2320",
        pin: true,
        scrub: 0.1,
        inertia: false,
        snap: {
          snapTo: 1 / (block.length - 1),
          ease: "linear"
        }
      }
    })
  }      
})

 

  • Like 3
Link to comment
Share on other sites

Hi OSUblake,

 

thanks a lot for your support! I missed that detail. I can see the errors in the codepen but I did not get any errors in my local project ://

  • Like 2
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.
×