[GSAP ScrollTrigger not working with Locomotive Scroll in Laravel after compiling asset with Laravel Mix]

Actually it is Laravel Project and Working Good in Plain Javascript Iam using GSAP, ScrollTrigger, TextPlugin & Locomotive Scroll but I want to compile assets with laravel Mix I compiled it and also there is no error but after including compiled Javascript File in Html file it breaks the animation this problem is coming it is working in plain javascript but not after compiled with Laravel Mix

[GSAP ScrollTrigger not working with Locomotive Scroll in Laravel after compiling asset with Laravel Mix]

// or all tools are exported from the "all" file (excluding members-only plugins):
import LocomotiveScroll from 'locomotive-scroll'
import { gsap, ScrollTrigger, TextPlugin} from "gsap/all";
// don't forget to register plugins
gsap.registerPlugin(ScrollTrigger, TextPlugin);


// Smooth Scroll Function
const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".scroll-smooth-loco"),
    smooth: true,
    // for tablet smooth
    tablet: { smooth: true },
});
locoScroll.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(".scroll-smooth-loco", {
    scrollTop(value) {
        return arguments.length
            ? locoScroll.scrollTo(value, 0, 0)
            : locoScroll.scroll.instance.scroll.y;
    },
    getBoundingClientRect() {
        return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight
        };
    }

    // follwoing line is not required to work pinning on touch screen

    /* pinType: document.querySelector(".smooth-scroll").style.transform
      ? "transform"
      : "fixed"*/
});

let tl = gsap.timeline(); // define timeline

// Animate graphs function
function initGraphSectionAnimate() {
    tl.from([".graphGrowY"], {
        scaleY: 0,
        transformOrigin: "bottom",
        duration: 2,
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "bottom +=200",
            pin: true,
            scrub: true,
            // markers: true,
        },
    });

    tl.from([".graphGrowFromBottom"], {
        scaleY: 0,
        transformOrigin: "top",
        duration: 2,
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "bottom center",
            scrub: true,
            // markers: true,
        },
    });

    tl.from([".graphGrowCreditCards1"], {
        scaleY: 0,
        transformOrigin: "bottom",
        duration: 2,
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "bottom center",
            scrub: true,
            // markers: true,
        },
    })
        .from([".graphGrowCreditCards2"], {
            scaleY: 0,
            transformOrigin: "bottom",
            duration: 2,
            scrollTrigger: {
                trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
                start: "top top",
                end: "bottom center",
                scrub: true,
                // markers: true,
            },
        })
        .from([".graphGrowCreditCards3"], {
            scaleY: 0,
            transformOrigin: "bottom",
            duration: 2,
            scrollTrigger: {
                trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
                start: "top top",
                end: "bottom center",
                scrub: true,
                // markers: true,
            },
        })
        .from([".graphGrowCreditCards4"], {
            scaleY: 0,
            transformOrigin: "bottom",
            duration: 2,
            scrollTrigger: {
                trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
                start: "top top",
                end: "bottom center",
                scrub: true,
                // markers: true,
            },
        });
}

// Manipulation of numbers function
function initNumberManipulationAnimated(startCountNum, endCountNum, idOfElement) {
    let startCount = startCountNum,
        num = {var:startCount};

    gsap.timeline({
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "+=300",
            scrub: true,
        }
    })
        .to(num, {var: endCountNum, duration: 5, ease:"none", onUpdate:changeNumber})
        .to({}, {duration:2})

    function changeNumber() {
        idOfElement.innerHTML = (num.var).toFixed();
    }

}

// Manipulate All Numbers Function
function manipulateAllNums() {
    initNumberManipulationAnimated(0, 205115, numbers); // For Credit Balance
    initNumberManipulationAnimated(0, 1540, buildbalancecount); // For Bill & Taxes
    initNumberManipulationAnimated(0, 4230, energyPower);
    initNumberManipulationAnimated(0, 3421, bonusNumAnm);
    initNumberManipulationAnimated(0, 56909, EarningsAm);
    initNumberManipulationAnimated(0, 6543, SpentThisMonth);
    initNumberManipulationAnimated(0, 543, clientAmNum);
    initNumberManipulationAnimated(0, 985, LeadsAmNum);
    initNumberManipulationAnimated(0, 780, RevenueAmNum);
    initNumberManipulationAnimated(0, 34, UsersAmNum);
}

// Big Animate Section UI, Code Speed up Section
function bigUiCodeAnimation() {
    // green light Animate
    const greenlightAnimate = gsap.timeline({ repeat: -1 }).to(".greenResLight", {
        opacity: 0,
        duration: 1.5,
        ease: "Power4.inOut"
    });

    // main animation
    const tl = gsap.timeline( {    // defining ScrollTrigger
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd",
            start: "top top",
            end: "bottom +=350",
            pin: true,
            scrub: true,
            // markers: true,
        }
    })
    tl.fromTo(   // Animating Best ui text
        ".hero-text",
        { y: "50px", opacity: 0, duration: 10, delay: 2 },
        { y: "0px", opacity: 1, stagger: 0.5 },
        "+=1"
    )
        .to(".hero-text", { opacity: 0 }, "+=1") // fade out Best ui text
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {
                background: 'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',
                scale: 3,
                x: -50,
                ease: "none",
                duration: 10,
            }, "+=1"
        )
        .from([
                ".triangleElementUi",
                ".circleElementUi",
                ".uiShape1",
                ".uiShape2"
            ],
            {  scale: 0,
                opacity: 0,
                transform: "rotate(90deg)",
                duration: 3
            }
            , "+=1"
        )
        .from(".greatManImg1", {scale: 5, opacity: 0, duration: 10}, "+=1")
        .from(".greatManImg2", {scale: 5, opacity: 0, duration: 10}, "+=1")
        .from(".greatManImg3", {scale: 5, opacity: 0, duration: 10}, "+=1")
        .to(".bestUiDesignSec",{opacity: 0, duration: 3}, "+=1")
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {
                background: '#ffffff',
                x: 7,
                scale: 1,
                ease: "none",
                duration: 10,
            }, "+=1"
        )
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd",
            {backgroundImage: "url(frontend/media/best-in-class-ui-code/code-editor-bg.svg)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1")
        .from(".consoleEditorSvg", {scale: 0.5, opacity: 0, duration: 10, delay: 1}, "+=1")
        .to(".constText", {
            duration: 2,
            text: "const",
            delay: 1
        })
        .to(".getRespText", {
            duration: 2,
            text: "getResponse",
            delay: 1
        })
        .to(".getResEqText", {
            duration: 2,
            text: "=",
            delay: 1
        })
        .to(".getResDataLineText", {
            duration: 2,
            text: "axirio",
            delay: 1
        })
        .to(".getResDataDotText", {
            duration: 2,
            text: ".",
            delay: 1
        })
        .to(".getResDataGetText", {
            duration: 2,
            text: "GetData",
            delay: 1
        })
        .to(".getResDataBreText", {
            duration: 2,
            text: "()",
            delay: 1
        })
        .to(".getResDataColText", {
            duration: 2,
            text: ";",
            delay: 1
        })
        .from(".respSvg", {
            y: -50,
            scale: 1,
            opacity: 0,
            duration: 3,
        })
        .from(".showCodeSlow",{
            opacity: 0,
            duration: 3
        })
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {
            backgroundImage: '',
            duration: 3,
        })
        .to(".consoleEditorSvg", {
            opacity: 0,
            duration: 3
        })
        .to(".respSvg", {
            opacity: 0,
            duration: 3
        }, "+=1")
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd",
            {backgroundImage: "url(frontend/media/best-in-class-ui-code/speed-upBg.png)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1")
        .from(".speed-upSvg", {
            opacity: 0,
            scale: 0,
            duration: 10
        })
        .from(".fallingAngle", {
            opacity: 0,
            y: -70,
            duration: 3
        });
}


// initializer function
function init() {
    initGraphSectionAnimate();
    manipulateAllNums();
    bigUiCodeAnimation();
}
window.addEventListener("load", function () {
    init();
    // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
    ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
    ScrollTrigger.defaults({ scroller: '.scroll-smooth-loco' });
// --- SETUP END ---
});