Jump to content
Search Community

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

wandri test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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": [


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

  • 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.
  • Create New...