Laravel Mix：未捕獲ReferenceError：未定義ScrollMagic

Question

我正在使用UI並嘗試與GSAP一起實現scrollmagic ，我首先在加載時實現了GSAP動畫，並且對我來說就像是魅​​力，但是當我嘗試通過Scrollmagic實現GSAP ，我在控制台中遇到了此錯誤。

未捕獲的ReferenceError：未定義ScrollMagic

有關更多信息，我在package.json文件中添加了依賴項

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

然后將其導入到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'
});*/

然后在我的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);
        });

您的幫助將不勝感激。

謝謝 ：）

Answer 1

嘗試

global.ScrollMagic = require('scrollmagic');