Angular 2/4 - 如何使用 Gsap 安装 ScrollMagic？

Question

我有一个简单的问题：

如何在angular-cli应用程序中正确使用ScrollMagic和Gsap？

我做了什么：

npm install ScrollMagic

npm install gsap

在angular-cli.json:

"scripts": [
  "../node_modules/gsap/src/uncompressed/tweenmax.js",
  "../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
  "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js",
  "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addindicators.js"
],

在我的组件中：

import {TweenLite, Power2, TimelineMax, TweenMax} from "gsap";
import * as ScrollMagic from 'ScrollMagic';
import * as $ from 'jquery';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import "scrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js";

但这不起作用。我收到一个错误。

有人已经在他的 angular 2 应用程序上安装了插件吗？

谢谢。

Answer 1

我通过在我的组件顶部包含以下代码来管理它：

declare let ScrollMagic: any;
declare let TweenMax: any;

这让 TypeScript 知道您正在使用全局变量。添加此代码后，您可以从组件中删除相关导入。确保将您的脚本保存在 angular-cli.json 中，您走对了！如果您需要引用任何其他全局变量，您可以使用相同的方法。

Angular 2/4 - 如何使用 Gsap 安装 ScrollMagic？

Angular 2/4 - How to install ScrollMagic with Gsap?

scrollmagic

gsap

angular