0

我正在开发 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);
        });

您的帮助将不胜感激。

谢谢 ：）

4

1 回答 1

0

尝试

global.ScrollMagic = require('scrollmagic');
于 2018-03-06T19:36:46.870 回答