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

[wandri]

Hello everyone.

I know this isnt an issue but I need your help.

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.

[19h47]

Same issue but with Browserify, I don't understand what I'm doing wrong.

[mattjbrent]

You add animation.gsap.js but import animation.gsap.min.js...

[MichalKliment]

Hi,

I am using this starter https://github.com/AngularClass/angular-starter
and if I install gsap, scroll magic and imports-loader

npm install gsap
npm install scrollmagic
npm install imports-loader // this is important

Import Typescript definition from here https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap
(npm install @types/gsap not helps - I don't know why)

In webpack.common.js add

 resolve: {
      ....
      alias: {
        "ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"
      }
    },

...
 module: {
      rules: [
         ....
        {
          test: /\.js$/,
          loader: "imports-loader?define=>false"
        },
        .....

It can be used

App.servise.ts

import { Injectable } from "@angular/core";

@Injectable()
export class AppState {
  public ScrollMagic : any;
  public controller :any;

  constructor(){

    this.ScrollMagic = require("scrollmagic");
    require("scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap");
    this.controller = new this.ScrollMagic.Controller();

  }

}

home.component.ts

import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";

import { AppState } from "../app.service";
import { TweenMax, TimelineMax } from "gsap";

@Component({
  selector: "home",
  styleUrls: ["./home.component.css"],
  templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

 @ViewChild("test") test: ElementRef;
  constructor(private appState: AppState) {

  }

  public ngOnInit() {

    var scene = new this.appState.ScrollMagic.Scene({
      triggerElement: "#trigger",
      duration: 60
    })
      .setTween(TweenMax.to(this.test.nativeElement, 0.5, { y: -40 }))
      .addTo(this.appState.controller);

  }

}

Please, I am not sure if this is the best practices but it works

[wandri]

Thanks MichalKliment.

[BlueRayNL]

does this package still works with angular 8 ?

[DanielNetzer]

it is, just managed to actually make it work with GSAP as well.

in your index.html add the following scripts:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

and in the component you want to use ScrollMagic just declare it as global in the following manner
declare var ScrollMagic: any;

and since it's from a CDN then shouldn't be any build issues

[mehemmelbachir]

@DanielNetzer ... Did you tried your solution with Angular 2+
Because I think this will not work

[BasakKamil]

@DanielNetzer you must try to learn Angular or React xD

[DanielNetzer]

@BasakKamil @mehemmelbachir - https://github.com/DanielNetzer/gurushots
and here you can see the way I use it from the CDN - https://github.com/DanielNetzer/gurushots/blob/master/src/index.html

this is an angular 8 project using GSAP and scroll magic with tweening.