[Solved] ScrollTrigger.matchMedia is not a function

[xposedbones]

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

[ZachSaucier]

Hey xposedbones and welcome to the GreenSock forums. 

 

I'm not seeing anything that you did wrong. Can you please try to recreate the issue in a minimal demo? 

 

Side note: You can avoid having to import Power4 by using the (recommended) condensed string form: ease: 'power4'.

[xposedbones]

@ZachSaucier I didn't include a codepen since I'm not able to reproduce it on codepen

 

I have this in my package.json, do I need something else ? 

 

And thanks for letting me know about the string version of power4!

[GreenSock]

That error definitely sounds like you're loading a version of GSAP that's BEFORE 3.4.0 (which is when .matchMedia() was introduced). I realize your package.json indicates 3.4.2, but perhaps you need to clear your cache or something? Also, try console.log(ScrollTrigger.version) and see what that logs out. 

[xposedbones]

That was it! Cleared my node_modules and it worked after that. thanks!