javascript - Error: Can't resolve 'TweenMax' while using Angular CLI with ScrollMagic and GSAP - Stack O

admin管理员组

文章数量:1384114

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

Share Improve this question Follow edited Sep 11, 2017 at 11:51 Rahul Dagli asked Sep 11, 2017 at 11:35 Rahul DagliRahul Dagli 4,5021616 gold badges5151 silver badges8989 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签：