Angular 5 无法使用 GreenSock 动画文件

Question

我有一个 Angular 5 应用程序，我目前正在使用 GreenSock.js 库以及 ScrollMagic.js 实现滚动动画。一个非常重要的文件由于某种原因它不会让我在项目中包含没有错误称为

scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js

当我尝试将此文件导入项目时，我收到一个错误列表-

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
errors @ client:167
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1166
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
client:167 

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
    Module not found: Error: Can't resolve 'TweenMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
     @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
     @ ./src/app/home/home.component.ts
     @ ./src/app/app.module.ts
     @ ./src/main.ts
     @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Uncaught ReferenceError: tween is not defined
    at HTMLDocument.eval (home.component.ts:34)
    at l (scripts.bundle.js:2)
    at c (scripts.bundle.js:2)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2025)

这就是我的 component.ts 文件中的内容-

import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as $ from 'jquery';
import { TweenMax, TimelineMax, ScrollToPlugin } from 'gsap';
import * as ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

declare var $:any;
declare var TweenMax: any;
declare var TimelineMax: any;
declare var tween: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // intro: object [];

  constructor(private router: Router) {

  }

public  ngOnInit() {
    $(document).ready(function() {
      //Init Scroll Magic
      var controller = new ScrollMagic.Controller();

      var scrollScene = new ScrollMagic.Scene({
        triggerElement: 'a.leanArrow',
        triggerHook: "onLeave"
      })
      .setTween()
      .addIndicators({
        name: 'fade scene',
        colorTrigger: 'orange',
        colorStart: '#0000ff'
      })
      .addTo(controller);

      controller.scrollTo(function (newpos){
        TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
      });

      $(document).on("click", "a[href^='#']", function(e) {
        var id = $(this).attr("href");
        if($(id).length > 0) {
          e.preventDefault();

          controller.scrollTo(id);

          if (window.history && window.history.pushState) {
            history.pushState(", document.title, id");
          }
        }
      });

    //loop through each img
    $('img').each(function() {
    //build scene
    var ourScene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.6
  })

  .setClassToggle(this, 'fade-in')
  .addIndicators({
    name: 'fade scene',
    colorTrigger: 'black',
    colorStart: '#ff0000'
  })
  .addTo(controller);
  });

    //Manage animatedMenu
    var animatedMenu = new ScrollMagic.Scene({
    triggerElement: 'section',
    triggerHook: 0.1
  })

  .setClassToggle('#animatedMenu', 'fade-in')
  .addIndicators({
    name: 'menu scene',
    colorTrigger: 'purple',
    colorStart: '#00ff00'
  })
  .addTo(controller);
}
}

有谁知道如何用 Angular 中的 animation.gsap.js 文件解决这个问题？

Answer 1

游戏迟到了，但我最近遇到了同样的问题和解决方案，我发现要么需要弹出应用程序，要么无法正常工作。

基于一起编译的一些答案，这对我有用。

假设您已经安装了 gsap 和 scrollmagic 节点模块:

安装 imports-loader 和 types/greensock

npm install imports-loader @types/greensock --save

在 tsconfig.app.json 确保 greensock 在编译器对象的 types 数组中:

"types": [
  "node", "greensock"
]

在需要 scrollmagic + gsap 的模块中，使用以下导入声明:

import 'imports-loader?define=>false!scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js';
import { TimelineMax} from 'gsap';
import * as ScrollMagic from 'scrollmagic';