Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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.

 

Link to comment
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
Link to comment
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.

 

Link to comment
Share on other sites

  • 3 weeks later...

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.
×