wandri

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

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.