aki-sol Posted October 5, 2021 Share Posted October 5, 2021 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 More sharing options...
Solution OSUblake Posted October 5, 2021 Solution Share Posted October 5, 2021 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" } } }) } }) Â 3 Link to comment Share on other sites More sharing options...
aki-sol Posted October 5, 2021 Author Share Posted October 5, 2021 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 :// 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now