将gsap与nuxtjs一起使用 [英] Use gsap with nuxtjs

问题描述

我想将gsap与ScrollMagic结合使用. ScrollMagic已经实现，并且可以正常工作，但是当我想使用animation.gsap时出现错误

I want to use gsap in combination with ScrollMagic. ScrollMagic is already implemented and it works fine, but when I want to use animation.gsap i get the error

未找到这些依赖项: * ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js中的TimelineMax * TweenMax位于./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js

These dependencies were not found: * TimelineMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js * TweenMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js

因此，我通过npm安装了gsap

Therefore I installed gsap via npm

npm i gsap

以及导入的TimelineMax和TweenMax

and imported TimelineMax and TweenMax

if (process.browser) {
    const sm = require('ScrollMagic')

    require('gsap/TimelineMax')
    require('gsap/TweenMax')

    require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap')
    require('scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators')

    Vue.prototype.$sm = sm
    Vue.prototype.$smController = new sm.Controller()
}

在我的nuxt.config.js文件中，我将gsap添加到了供应商阵列中

and in my nuxt.config.js file i added gsap to the vendor array

vendor: ['gsap', 'ScrollMagic', 'vuebar', 'vee-validate'],

在我的组件中，我将此代码用于视差效果

and in my component i use this code for a paralax-effect

new this.$sm.Scene({
    triggerElement: '#js-introduction-paralax',
    triggerHook: 'onEnter'
})
    .duration('200%')
    .setTween('#js-introduction-paralax', {
        backgroundPosition: '50% 100%'
        ease: Linear.easeNone
    })
    .addIndicators()
    .addTo(this.$smController)

但是我仍然得到找不到依赖项的错误

but i still get the error that the dependecies were not found

UPDATE

UPDATE

我也尝试过以这种方式导入

I also tried to import it in this way

import { TweenMax, TimelineMax, Linear } from 'gsap'
or seperated
import TweenMax from 'gsap/TweenMax'; 
import TimelineMax from 'gsap/TimelineMax';

但结果相同

我也试图做别名

resolve: {
    modules:[
      path.resolve(__dirname), path.resolve(__dirname, "node_modules")
    ],
    alias: {
        "TweenMax": path.resolve('node_modules', 'gsap/TweenMax'),
        "TimelineMax": path.resolve('node_modules', 'gsap/TimelineMax'),
        "gsap": path.resolve('node_modules', 'gsap'),
    }
},

同样的结果

当我在控制台中书写

window.TweenMax

我明白了

ƒ (target, duration, vars) {
            TweenLite.call(this, target, duration, vars);
            this._cycle = 0;
            this._yoyo = (this.vars.yoyo === true || !!this.vars.yoyoEase);
            this._repeat = this.vars.repe…

所以加载了一些东西...

so something is loaded...

推荐答案

它可能对您有用. 我也有像您一样的错误，并且在此处.

It maybe useful for you. I also have some errors like you, and I found a solution to my problem here.

import ScrollMagic from 'scrollmagic'
import {
    TweenMax,
    TimelineLite
} from 'gsap'

import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'

别忘了做

npm i scrollmagic imports-loader

这篇关于将gsap与nuxtjs一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！