How to import MatchMedia with Yarn?

[pbj 5 Likes (Newbie)]

Hopefully this is relatively as straight forward as the title suggests. Using yarn as our package manager and running gsap.matchMedia() fails with the following error

gsap.matchMedia is not a function

Curious if there is something particular we need to do? To things:

1. Apologies if formatting is off, for some reason it's not liking my code!

2. Will work in a MVP use case to help offset any testing. 

My file in Vue.js

 

import scrollTo from "../../mixins/scrollto";

import {
    gsap
} from "gsap";
import {
    ScrollTrigger
} from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default {
    name: "FaqAccordion",
    mounted() {
        this.initScrollTrigger()
    },
    methods: {
        initScrollTrigger() {
            let mm = gsap.matchMedia();

            mm.add("(min-width: 768px)", () => {
                this.faqs.forEach((faq, index) => {
                    const el = document.querySelector(`[data-nav="${faq.handle}"]`);

                    ScrollTrigger.create({
                        trigger: `#${faq.handle}`,
                        start: "top 50%",
                        end: "bottom 50%",
                        scrub: 1,
                        markers: true,
                        onEnter: ({
                            progress,
                            direction,
                            isActive
                        }) => {
                            console.log('on enter:: ', faq)
                            this.removeActiveClasses()
                            el.classList.add('bg-cactus', 'text-white')
                        },
                        onEnterBack: () => {
                            console.log('on enterback:: ', faq)
                            this.removeActiveClasses()
                            el.classList.add('bg-cactus', 'text-white')
                        },
                        onLeave: ({
                            progress,
                            direction,
                            isActive
                        }) => {
                            console.log('on leave:: ', faq)
                            el.classList.remove('bg-cactus', 'text-white')
                        },
                    });
                })
            })
        }
    },
};

 

[GreenSock 18,876 Likes (Superhero)]

It sounds like you just have an old version of GSAP (before matchMedia() was added in 3.11.0). The current version is 3.11.1. Once you update (you may need to clear your cache), you should be good-to-go. 👍

[pbj 5 Likes (Newbie)]

May be a another dumb question but is there any particular way to update a paid package?

It's as simple as yarn upgrade gsap