Good way to install Gsap + ScrollMagic animation plugin to angular 2/4.

[wandri 0 Likes (Newbie)]

Hello everyone.

 

I know that there is topic about angular but I have checked every topics without having an answer to my problem.

 

My problem is simple.

 

How to implemenent properly ScrollMagic and gsap to an Angular-Cli (2/4) app.

 

I have installed:

npm install gsap
npm install scrollmagic

 

I have added to my .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, I have:

 

 

import { TweenMax } 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';

 

 

And I use in my script.: 

TweenMax.to(calculator, 1.5, { scale: 2 })
...
new ScrollMagic.Scene(...)
.setTween(TweenMax.to(calculator, 1, { scale: 2 }))

 

And i get the following error:

 

Cannot read property 'to' of undefined

 

If I remove the path of TweenMax in angular-cli.json, and I remove the import of animation.gsap.min.js, the following action works.

 

TweenMax.to(calculator, 1.5, { scale: 2 })

 

 

but the next action:

.setTween(TweenMax.to(calculator, 1, { scale: 2 }))

doesnt work and I have this error:

(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

And if I just remove the import  {TweenMax} from 'gsap'  in my component, I get the following error:

./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in 'D:\...\...\node_modules\ScrollMagic\scrollmagic\minified\plugins' @ ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js 3:53-103 @ ./src/app/cv/cv.component.ts @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

 

 

 

So If someone know how to install it properly, that would be great.

 

Thank you.

 

[OSUblake 9,990 Likes (Superhero)]

I don't see why you would need to add GSAP to your scripts. Just install it normally through npm. As for ScrollMagic, I don't know. That's not a GSAP product, so you should ask over there.

https://github.com/janpaepke/ScrollMagic

 

I know some people are using ScrollMagic in this thread, but they didn't post how they installed it.

 

 

[wandri 0 Likes (Newbie)]

Thanks for your quick answer.

 

I will try on the github, you are right.

And I have sent a message to one of the user from your post.

 

[apploud 2 Likes (Newbie)]

Hi,

 

this topic was answered here

https://github.com/janpaepke/ScrollMagic/issues/700