Jump to content
GreenSock

pbj

How to import MatchMedia with Yarn?

Go to solution Solved by GreenSock,

Recommended Posts

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')
                        },
                    });
                })
            })
        }
    },
};

 

  • Like 1
Link to comment
Share on other sites

  • Solution

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. 👍

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×