Laravel Mix：未捕获的ReferenceError：未定义ScrollMagic

Question

我正在使用UI并尝试与scrollmagic一起实现GSAP我首先在加载时实现了GSAP动画，对我来说就像魅力一样，但是当我尝试用GSAP实现Scrollmagic时，我在控制台中遇到了这个错误。

未捕获的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');