Jump to content
Search Community

How to import MatchMedia with Yarn?

pbj test
Moderator Tag

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

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.
×
×
  • Create New...