4

I have a simple question:

How to use properly in an angular-cli application, ScrollMagic and Gsap?

What I have done:

npm install ScrollMagic

npm install gsap

In 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"
],

in my component:

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

But this doesn't work. I get an error.

Has somebody already installed the plugin on his angular 2 app?

Thanks.

Wandrille
  • 6,267
  • 3
  • 20
  • 43

1 Answers1

3

I managed this by including the following code at the top of my component:

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

This let's TypeScript know that you're using a global variable. After adding this code, you can remove the relevant imports from your component. Make sure to keep your scripts in your angular-cli.json, you were on the right track there! If you need to reference any other global variables, you can do so with the same methodology.

Kyle Meenehan
  • 115
  • 7