[英]Error: Can't resolve 'TweenMax' while using Angular CLI with ScrollMagic and GSAP
我正在嘗試將Scrollmagic插件與Angular CLI集成。 但是,我收到此錯誤:
./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js找不到模塊:錯誤:無法解析'/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/中的'TweenMax'插件
我使用npm安裝了GSAP和scrollmagic庫:
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);
}
}
你應該“彈出”你的應用程序。 這將使您訪問Webpack(不,你不能回去,所以一定要備份。)。
npm install gsap imports-loader scrollmagic --save
安裝imports-loader非常重要。 當webpack.config.js添加到您的項目根目錄時,重新安裝應用程序npm install
,因為需要安裝新的東西,然后將其放入您的webpack別名:
"alias": {
"TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
"TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
"TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
"TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
"ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
"animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
"debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),},
將此添加到您的Component.ts:
import 'imports-loader?define=>false!animation.gsap';
import ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
import {TweenMax} from 'gsap/TweenMax';
import {TweenLite} from 'gsap/TweenLite';
import {ScrollToPlugin} from "gsap/ScrollToPlugin";
應該工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.