[problem using matchmedia]

animation is working correctly when browser loads, when I resize the browser, the animation does not work.

gsap.registerPlugin(ScrollTrigger);

 

ScrollTrigger.matchMedia({

    "(min-width: 750px)": ()=>{

        let timeline = gsap.timeline({

            scrollTrigger:{

                trigger: " #skill",

                start: "top 60%",

                toggleActions: "restart ",

                duration: 2

        }});

        timeline

        .from("#skill .title", {

            x:"-120%", 

            ease:'power3',

            opacity: 0

        })

        .from("#skill .skill", { 

            x:"-120%",

            opacity: 0

        })

        .from("#skill .progress", {

            x:"-100%", 

            ease:'power2',

            stagger: 0.15,

            opacity: 0

        }, 1);

        

        

    },

 

    "(max-width: 749px)": ()=>{

        let timeline = gsap.timeline({

            scrollTrigger:{

                trigger: " #skill",

                start: "top 60%",

                toggleActions: "restart",

                duration: 2

        }});

        timeline

        .from("#skill .title", {

            x:"-100%", 

            ease:'power3', 

            stagger:0.15

        })

        .from("#skill .skill-bar", { 

            x:"-100%", 

            ease:'power3', 

            stagger:0.15

        })

        .from("#skill .progress", {

            x:"-100%", 

            ease:'power3', 

            stagger:0.15

        }, 1);

        

        

    }

 

});