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?