matchMedia() doesn't work with this.$ScrollTrigger

[giticon]

There's a problem with matchMedia()

Error

this.$ScrollTrigger.matchMedia({
      "(min-width: 768px)": function() {
        this.$gsap.to("myId", {

Correct

const sTrig = this.$ScrollTrigger;
const gs = this.$gsap;

    sTrig.matchMedia({
      "(min-width: 768px)": function() {
        gs.to(apropositoTitle, {

[ivodolenc]

Hi, I just tested ScrollTrigger.matchMedia and it works as expected.

Here are simple example from the official docs:

index.vue

<template>
  <div style="min-height: 200vh">
    <p class="panel">Example</p>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$ScrollTrigger.matchMedia({
        // desktop
        '(min-width: 800px)': () => {
          // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here...
          // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.
          this.$gsap.to('.panel', {
            xPercent: 100,
            scrollTrigger: {
              trigger: '.panel',
              scrub: 1,
              pin: true,
              end: '+=500',
            },
          })
        },
      })
    },
  }
</script>

Test env:

• create-nuxt-app
• nuxt v2.15.4
• nuxt-gsap-module v1.3.1

[giticon]

Thank you Ivo!. The problem was here

error:

'(min-width: 800px)': function() {

the solution is arrow function

'(min-width: 800px)': () => {

[ivodolenc]

Np 👍 I'm glad it worked for you