Laravel Mix: Uncaught ReferenceError: ScrollMagic is not defined

Question

I'm working on UI and trying to implement scrollmagic along with GSAP I have first implemented GSAP animation on load and works like charm for me but when I tried to implement GSAP with Scrollmagic I got this error in console.

Uncaught ReferenceError: ScrollMagic is not defined

For further information I have added dependencies in package.json file

"dependencies": {
        "gsap": "^1.20.4",
        "scrollmagic": "^2.0.5"
    }

then import it into app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
require('gsap');
require('scrollmagic');
require('./custom');

/*window.Vue = require('vue');*/

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

/*Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});*/

then in my home.blade.php

$(document).ready(function () {
            let scrollMagicController = new ScrollMagic();
            let showHeader = TweenMax.from('.menu-container',0.5,
                {
                    opacity:0,
                    width: "100%",
                    ease:Power1.easeOut
                });
            let showHeaderTrigger = new ScrollScene({
                triggerElement: '.about-us-section',
                triggerHook:"onCenter"
            }).setTween(showHeader)
                .addTo(scrollMagicController);
        });

Your help will be appreciated.

Thanks :)

Answer 1

尝试

global.ScrollMagic = require('scrollmagic');