How to use ScrollMagic with Angular CLI 1.2.0?

[rahuldpi]

Hi, I'm trying to include GSAP with ScrollMagic plugin in Angular 4 project. I'm using Angular CLI version. 1.2.0.

However I'm getting this error:

ERROR in ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TweenMax' in '/Users/rdagli/Desktop/Projects/MyProject/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/rdagli/Desktop/Projects/MyProject/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I've imported all the required packages inside my component:

import {TweenLite, Power1, Power2, TimelineMax, TweenMax} from "gsap";
import * as ScrollMagic from 'scrollmagic';
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js";
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js";
import 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js';

[craigjames16]

I had the same problem and it had to do with the AMD syntax at the beginning of the animation.gsap.js

if (typeof define === "function" && define.amd) {
       // AMD. Register as an anonymous module.
		define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory);
	} else if (typeof exports === 'object') {
		// CommonJS
		// Loads whole gsap package onto global scope.
		require('gsap');
		factory(require('scrollmagic'), TweenMax, TimelineMax);
	} else {
		// Browser globals
		factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.TweenMax || root.TweenLite, root.TimelineMax || root.TimelineLite);
	}

the define method fails silently

[gordonpeterson]

This workaround is still throwing an error. It is a compile error, and I cannot get past it to troubleshoot anything else. This is the error:

Failed to compile.

./node_modules/Scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/some-user/scroll-test/ng-gsap/node_modules/Scrollmagic/scrollmagic/minified/plugins'

Any ideas? I'm running the latest angular cli:

Angular CLI: 6.0.8
Node: 10.2.0
OS: darwin x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

I added the files to the scripts object in the angular.json file. This seems to work:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/some-project",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "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"
           ]
          },

I have tested it and they are being loaded in. It seems like this should be fine for scrolling. The debug.addIndicators plugin works fine. I just keep getting errors with the animation.gsap plugin. Here is what my controller looks like:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { TweenMax, TimelineMax, CSSPlugin, ScrollToPlugin, Draggable, Sine, RoughEase, Power0, AttrPlugin } from 'gsap/all';
import { ScrambleTextPlugin } from '../gsap-bonus/ScrambleTextPlugin';
import * as ScrollMagic from 'ScrollMagic';
//... taking this out stops the indicators from showing up
import 'ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js';
//... adding this throws the compile error stated above
//import 'Scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js';

@Component({
  selector: 'some-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  plugins = [ CSSPlugin, AttrPlugin, ScrambleTextPlugin, ScrollMagic, TweenMax, TimelineMax ];

  private controller: ScrollMagic.Controller;
  private scene1: ScrollMagic.Scene;

  ngOnInit(): void {
    
    const tween1 = new TimelineMax( {paused: true} );
    tween1.to( '#mainHeader', 2, {opacity: 0, y: 5, ease: Sine.easeOut});

    this.controller = new ScrollMagic.Controller();

    this.scene1 = new ScrollMagic.Scene({
      triggerElement: '#trigger1',
      offset: 0,
      triggerHook: 0,
      duration: '50%'
    })
    .setPin( '#trigger1', {pushFollowers: false} )
    .setClassToggle('#mainHeader', 'show')
    .addIndicators({
       name: 'trigger1--->',
       colorTigger: 'yellow',
       colorStart: 'orange',
       colorEnd: 'gold'
    })
    .setTween( this.tween1 )
    .addTo( this.controller) ;

  }
}

adding setTween() gives me this error:
12:10:25:442 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

so the basic problem I can't get around is that the compiler blocks the animation.gsap plugin from working and obviously the setTween() only works if the plugin can run. Again, the debug.addIndicators plugin works fine.

I've been searching for two days now and I am at a standstill. Any ideas? Has anyone tried this with the latest angular cli (Angular CLI: 6.0.8)?

thanks!
-xoxo

[construyacol]

como fucking mierda hacen marchar el putisimo addIndicators, llevo seven hours trying but not funciona el muy perro

[sebass]

@construyacol could you stick to french?

[ronjb04]

im on the same boat! been searching around how to get through this missing animation.gsap issue..

i've spend hrs already on this :(

[tchbell]

Try reordering the scripts in your angular.json to

"scripts": [ "./node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js", "./node_modules/gsap/src/minified/TweenLite.min.js", "./node_modules/gsap/src/minified/TweenMax.min.js", "./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js" ]

Then in your component use

declare var ScrollMagic: any;

to get the ScrollMagic Object.

[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

[mps2209]

Try reordering the scripts in your angular.json to

"scripts": [ "./node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js", "./node_modules/gsap/src/minified/TweenLite.min.js", "./node_modules/gsap/src/minified/TweenMax.min.js", "./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js" ]

Then in your component use

declare var ScrollMagic: any;

to get the ScrollMagic Object.

with this setup it finally worked for me.
and if you want to use the debug indicators just add
"./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"
to the scripts. (or the min version of it)

also you need to declare TweenMax, Linear and all the other components like ScrollMagic to use them.

[arunvc]

Working example see this #700 (comment)