Started using ScrollTrigger for the first time on a project and was happy to hear about the matchmedia function, but I can't get it to work. I want to disable the instance on mobile and enable it on desktop and I'm getting a 'ScrollTrigger.matchMedia is not a function' in my console. I'm also not seeing the matchMedia in the autocompletion of ScrollTrigger. Here is my code:
import { gsap, Power4 } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
/*
. . .
*/
gsap.registerPlugin(ScrollTrigger);
gsap.defaults({ease: Power4.easeOut, duration: 2});
this.tl = gsap.timeline({paused: true});
for(let i: number = 0; i < sections.length; i++) {
this.tl.from(sections[i], {yPercent: i == 0 ? 0 : 200, autoAlpha: i == 0 ? 1 : 0});
}
ScrollTrigger.matchMedia({
'(min-width: 768px)': () => {
if (this.instance == null) {
this.instance = ScrollTrigger.create({
animation: this.tl,
trigger: this.viewport,
start: 'center center',
end: `+=${window.innerHeight * 2}`,
scrub: true,
pin: true,
anticipatePin: 1
});
this.instanceDisabled = false;
} else if (this.instanceDisabled) {
this.instance.enable();
}
},
'(max-width: 767px)': () => {
if (this.instance && !this.instanceDisabled) {
this.instance.disable();
this.instanceDisabled = true;
}
}
});
The ScrollTrigger.create works fine call it outside of the matchmedia so I know I'm correctly loading the plugin. I'm on 3.4.2