首页 文章

错误：在使用带有ScrollMagic和GSAP的Angular CLI时可以't resolve ' TweenMax'

提问于
浏览 次
3

我正在尝试将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"
      ],

Component

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);


  }
}
javascript angular gsap scrollmagic

1 回答

  • 5

    你应该“弹出”你的应用程序 . 这将使您访问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";

    应该工作

    回复于

相关问题