我想将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一起使用
发布评论