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

Question

我正在开发 UI 并尝试实现 scrollmagic 和 GSAP 我首先实现了 GSAP 加载动画并且对我来说就像魅力但是当我尝试实现 GSAP 和 Scrollmagic我在控制台中收到此错误。

Uncaught ReferenceError: ScrollMagic is not defined

更多信息我在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');