Angular 2/4 - How do I install ScrollMagic using Gsap?
I have a simple question:
How to use angular-cli app, ScrollMagic and Gsap correctly?
What I've 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 it doesn't work. I am getting an error.
Has anyone already installed a plugin in their angular 2 app?
Thank.
+3
source to share
1 answer
I succeeded by including the following code at the top of my component:
declare let ScrollMagic: any;
declare let TweenMax: any;
This lets TypeScript know that you are using a global variable. After adding this code, you can remove the corresponding imports from your component. Make sure to save your scripts in your angular-cli.json, you were on the right track! If you need to reference any other global variables, you can do so using the same methodology.
+2
source to share