Error: Can't resolve 'TweenMax' while using Angular CLI with ScrollMagic and GSAP

Question

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/uncompressed/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.component.html',
  styleUrls: ['./floating-butterfly.component.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);


  }
}

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, Sep 29 '17 at 18:29

score 8 · Accepted Answer · answered Dec 01 '17 at 14:01

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/uncompressed/TweenLite.js'),
"TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
"TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
"TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
"ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
"animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
"debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),},

add this to your Component.ts:

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

that should work

Thanks, that's working. But now how do I compile the project without using `ng build` command? Is there any equivalent option within webpack? — Rahul Dagli, Mar 12 '18 at 14:06
@RahulDagli `npm run build` or `npm run start` should work, see package.json in the script section — LucitheR, Mar 13 '18 at 15:53

Error: Can't resolve 'TweenMax' while using Angular CLI with ScrollMagic and GSAP

1 Answers1