1

I'm currently struggling to get ScrollMagic to fully work on Angular 7. I've installed GSAP and ScrollMagic, but in order for ScrollMagic to work it also needs the animation.gsap.js plugin.

I've imported everything and all the imports are working but the animation.gsap.js still can't find the GSAP animation library. Each time I try to ng Serve I get the error: Module not found: Error: Can't resolve 'TimelineMax' and Module not found: Error: Can't resolve 'TweenMax'.

I've read about the same issue people had but that's for Angular 2, a few things have changed and I don't get the same results as those people.

But what I've tried so far was to import all the scripts I've used imports-loader but to no avail. This is really frustrating because GSAP and the core of ScrollMagic actually work in Angular 7 but I can't seem to get the plugin to work. What I understand is the plugin loads before the GSAP library does. What really confuses me is that I import GSAP first then Scroll Magic and then the plugin. I've tried changing the order in which the imports should come in but nothing worked as well...

inside my angular.json file under scripts I have: 

 "scripts": [
              "./node_modules/gsap/src/uncompressed/TweenMax.js",
              "./node_modules/parallax-js/dist/parallax.min.js",
              "./node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
              "./node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.js",
              "./node_modules/scrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
            ],

Then inside my component, I import them as such:

import {Component, ElementRef, OnInit, ViewChild, AfterContentInit} from '@angular/core';
import {TweenMax , TimelineMax} from 'gsap/all';
import * as ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/minified/plugins/animation.gsap.min'
import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min";

And like I also said I have imports-loader installed which is used by ScrollMagic.

I've also verified that TweenMax and TimelineMax work by querying it in the console from the developer tools in Chrome.

Thanks in advance!

Mark Syrzysko
  • 31
  • 1
  • 5

2 Answers2

1

Ok so fiddling around and read a few more posts I've come up with a fix. I used imports-loader. 

npm install imports-loader

and instead of just importing the animation-gsap.js as

import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'

I used

import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
Mark Syrzysko
  • 31
  • 1
  • 5
0

Install (latest) gsap so that u can use it trough scrollmagic. npm install gsap.

Load gsap FIRST and scrollmagic as SECOND.

In ES6 you load gsap via: import { TweenMax, TimelineMax } from "gsap/TweenMax";