I'm trying to integrate Scrollmagic plugin with Angular CLI. However, I'm getting this error:

./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in '/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/plugins'

I have installed GSAP and scrollmagic library using npm:

npm install gsap
npm install scrollmagic

.angular-cli.json

"scripts": [
        "../node_modules/gsap/src/unpressed/TweenMax.js",
        "../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js",
        "../node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js",
        "../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
      ],

Component

import { Component, OnInit } from '@angular/core';
import { TweenMax, TimelineMax } 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";


@Component({
  selector: 'app-floating-butterfly',
  templateUrl: './floating-butterflyponent.html',
  styleUrls: ['./floating-butterflyponent.scss']
})
export class FloatingButterflyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
      triggerElement: ".floating-butterfly"
    })
    .setTween(".floating-butterfly", 0.5, {backgroundColor: "green", scale: 2.5}) // trigger a TweenMax.to tween
    .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
    .addTo(controller);


  }
}

I'm trying to integrate Scrollmagic plugin with Angular CLI. However, I'm getting this error:

./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in '/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/plugins'

I have installed GSAP and scrollmagic library using npm:

npm install gsap
npm install scrollmagic

.angular-cli.json

"scripts": [
        "../node_modules/gsap/src/unpressed/TweenMax.js",
        "../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js",
        "../node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js",
        "../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
      ],

Component

import { Component, OnInit } from '@angular/core';
import { TweenMax, TimelineMax } 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";


@Component({
  selector: 'app-floating-butterfly',
  templateUrl: './floating-butterfly.ponent.html',
  styleUrls: ['./floating-butterfly.ponent.scss']
})
export class FloatingButterflyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
      triggerElement: ".floating-butterfly"
    })
    .setTween(".floating-butterfly", 0.5, {backgroundColor: "green", scale: 2.5}) // trigger a TweenMax.to tween
    .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
    .addTo(controller);


  }
}

• javascript
• angular
• gsap
• scrollmagic

• Having the same problem at the moment... TweenMax is the only plugin that I can't import. TweenLite, TimelineLite & Max, CSSplugins all work. Tried with absolute path imports too, instead of npm package, same issue. Did you manage to solve this? – Nico Prat Commented Sep 29, 2017 at 18:29
• 1 @NicoPrat Please refer the answer by LucitheR – Rahul Dagli Commented Mar 9, 2018 at 12:58

1 Answer 1

You should 'ng eject' your app. That will give you access to Webpack (no you can't go back, so make sure to back up. ).

npm install gsap imports-loader scrollmagic --save

it's important that you install the imports-loader. when the webpack.config.js is added to your project root, reinstall the app npm install, since there are new things that needed to be installed, afterwards put this in your webpack aliases:

  "alias": {
"TweenLite": path.resolve('node_modules', 'gsap/src/unpressed/TweenLite.js'),
"TweenMax": path.resolve('node_modules', 'gsap/src/unpressed/TweenMax.js'),
"TimelineLite": path.resolve('node_modules', 'gsap/src/unpressed/TimelineLite.js'),
"TimelineMax": path.resolve('node_modules', 'gsap/src/unpressed/TimelineMax.js'),
"ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/unpressed/ScrollMagic.js'),
"animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/unpressed/plugins/animation.gsap.js'),
"debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/unpressed/plugins/debug.addIndicators.js'),},

add this to your Component.ts:

import 'imports-loader?define=>false!animation.gsap';
import ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/unpressed/plugins/debug.addIndicators';
import {TweenMax} from 'gsap/TweenMax';
import {TweenLite} from 'gsap/TweenLite';
import {ScrollToPlugin} from "gsap/ScrollToPlugin";

that should work