Search the Community

0down votefavorite I have an Angular 5 app that I'm currently implementing scroll animations using the GreenSock.js library as well as ScrollMagic.js. One really important file for some reason it will not let me include in the project without errors called scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js When I attempt to import this file into the project I receive a list of errors- ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js Module not found: Error: Can't resolve 'TimelineMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins' @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61 @ ./src/app/home/home.component.ts @ ./src/app/app.module.ts @ ./src/main.ts @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts errors @ client:167 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:883 SockJS._transportMessage @ sockjs.js:881 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2957 wrapFn @ zone.js:1166 ZoneDelegate.invokeTask @ zone.js:421 Zone.runTask @ zone.js:188 ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1517 globalZoneAwareCallback @ zone.js:1543 client:167 ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js Module not found: Error: Can't resolve 'TweenMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins' @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61 @ ./src/app/home/home.component.ts @ ./src/app/app.module.ts @ ./src/main.ts @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts Uncaught ReferenceError: tween is not defined at HTMLDocument.eval (home.component.ts:34) at l (scripts.bundle.js:2) at c (scripts.bundle.js:2) at ZoneDelegate.invokeTask (zone.js:421) at Zone.runTask (zone.js:188) at ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2025) This is what I have in my component.ts file- import { Component, OnInit, Injectable } from '@angular/core'; import { Router } from '@angular/router'; import * as $ from 'jquery'; import { TweenMax, TimelineMax, ScrollToPlugin } from 'gsap'; import * as ScrollMagic from 'ScrollMagic'; import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'; import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; declare var $:any; declare var TweenMax: any; declare var TimelineMax: any; declare var tween: any; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { // intro: object []; constructor(private router: Router) { } public ngOnInit() { $(document).ready(function() { //Init Scroll Magic var controller = new ScrollMagic.Controller(); var scrollScene = new ScrollMagic.Scene({ triggerElement: 'a.leanArrow', triggerHook: "onLeave" }) .setTween() .addIndicators({ name: 'fade scene', colorTrigger: 'orange', colorStart: '#0000ff' }) .addTo(controller); controller.scrollTo(function (newpos){ TweenMax.to(window, 0.5, {scrollTo: {y: newpos}}); }); $(document).on("click", "a[href^='#']", function(e) { var id = $(this).attr("href"); if($(id).length > 0) { e.preventDefault(); controller.scrollTo(id); if (window.history && window.history.pushState) { history.pushState(", document.title, id"); } } }); //loop through each img $('img').each(function() { //build scene var ourScene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.6 }) .setClassToggle(this, 'fade-in') .addIndicators({ name: 'fade scene', colorTrigger: 'black', colorStart: '#ff0000' }) .addTo(controller); }); //Manage animatedMenu var animatedMenu = new ScrollMagic.Scene({ triggerElement: 'section', triggerHook: 0.1 }) .setClassToggle('#animatedMenu', 'fade-in') .addIndicators({ name: 'menu scene', colorTrigger: 'purple', colorStart: '#00ff00' }) .addTo(controller); } } Does anyone know how to fix this issue with the animation.gsap.js file in Angular?