我正在尝试将Scrollmagic插件与Angular CLI集成。不过,我得到这个错误:错误:在使用Angular CLI与ScrollMagic和GSAP时无法解析'TweenMax'
./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in '/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/plugins'
我已经安装了GSAP和scrollmagic库使用NPM:
npm install gsap
npm install scrollmagic
.angular-cli.json
"scripts": [
"../node_modules/gsap/src/uncompressed/TweenMax.js",
"../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js",
"../node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js",
"../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
],
组件
import { Component, OnInit } from '@angular/core';
import { TweenMax, TimelineMax } from "gsap";
import * as ScrollMagic from 'ScrollMagic';
import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js";
import "ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js";
@Component({
selector: 'app-floating-butterfly',
templateUrl: './floating-butterfly.component.html',
styleUrls: ['./floating-butterfly.component.scss']
})
export class FloatingButterflyComponent implements OnInit {
constructor() { }
ngOnInit() {
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: ".floating-butterfly"
})
.setTween(".floating-butterfly", 0.5, {backgroundColor: "green", scale: 2.5}) // trigger a TweenMax.to tween
.addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
.addTo(controller);
}
}
目前发生同样的问题...... TweenMax是,我无法导入唯一的插件。 TweenLite,TimelineLite和Max,CSSplugins都可以工作。尝试绝对路径导入,而不是npm包,同样的问题。你有没有设法解决这个问题? –
@NicoPrat请参考LucitheR的答案 –