Gabb1995

If I don't import in my typescript file the build fails immediately. error TS2304: Cannot find name 'TimelineLite'. I'll try the third option if I figure out how to do it

Unfortunately only way it works after lots of different methods is to add "./node_modules/gsap/umd/TweenMax.js" to the scripts in angular.json if you want to use the buildOptimizer. This is not really an ideal solution as it adds ~120kb to my page when I'm only using a small part just TimelineLite and Elastic. I tried adding TimelineLite or TweenLite but they give the same error. Any other ideas?

1st fix did not work for me. Still the same error unfortunately. I added these : "scripts": [ "node_modules/gsap/src/uncompressed/TimelineLite.js", "node_modules/gsap/src/uncompressed/plugins/CSSPlugin.js", "node_modules/gsap/src/uncompressed/easing/EasePack.js" ], and I'm importing these: (I assume Elastic is in EasePack.js) import {Elastic, TimelineLite, CSSPlugin} from 'gsap/all'; If you could use the github package and try to fix it by not setting buildOptimizer set to false and then let me know how you fixed it would be great. https://github.com/Gabb1995/gsap-angular-7-bug

I did as you said inside the class but it doesnt work either. I have found some other stuff though. I did `import * as gsap from 'gsap/all'` and `console.log(gsap)` and this is the result. Some properties are undefined, while some properties aren't. Any ideas? This is why it is saying TimelineLite is not a constructor. Because it is undefined.

The types plugin doesn't work correctly either as it only allows from 'gsap' not 'gsap/all'. But it's an unrelated issue I think.

Test project where I replicated the same issue. https://github.com/Gabb1995/gsap-angular-7-bug If you do `ng serve` everything works fine but once you do `ng serve --prod` you get the same error you would get if you build prod and deploy to a server. Code that was changed from a completely new project: 1. npm install gsap 2. npm install @types/gsap --save-dev 3. app.component.ts import {Component, OnInit} from '@angular/core'; import {TimelineLite, Elastic, CSSPlugin, TweenMax} from 'gsap/all'; const gsapStuff = [CSSPlugin, TweenMax, TimelineLite]; // To prevent tree shaking @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'gsap-try'; ngOnInit(): void { const tl = new TimelineLite({ paused: true }); tl.from('#angular-logo', 2, { opacity: 2, scale: 2, ease: Elastic.easeOut }); tl.play(); } } 4. Added the #angular-logo id to the angular logo. Message I get in console on Firefox: ERROR TypeError: "bl is not a constructor" ngOnInit http://localhost:4200/main.3cba2eed50987385fc6b.js:1 bu http://localhost:4200/main.3cba2eed50987385fc6b.js:1 bu http://localhost:4200/main.3cba2eed50987385fc6b.js:1 bu http://localhost:4200/main.3cba2eed50987385fc6b.js:1 zu http://localhost:4200/main.3cba2eed50987385fc6b.js:1 El http://localhost:4200/main.3cba2eed50987385fc6b.js:1 updateDirectives http://localhost:4200/main.3cba2eed50987385fc6b.js:1 yu http://localhost:4200/main.3cba2eed50987385fc6b.js:1 detectChanges http://localhost:4200/main.3cba2eed50987385fc6b.js:1 tick http://localhost:4200/main.3cba2eed50987385fc6b.js:1 tick http://localhost:4200/main.3cba2eed50987385fc6b.js:1 _loadComponent http://localhost:4200/main.3cba2eed50987385fc6b.js:1 bootstrap http://localhost:4200/main.3cba2eed50987385fc6b.js:1 _moduleDoBootstrap http://localhost:4200/main.3cba2eed50987385fc6b.js:1 _moduleDoBootstrap http://localhost:4200/main.3cba2eed50987385fc6b.js:1 i http://localhost:4200/main.3cba2eed50987385fc6b.js:1 invoke http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 onInvoke http://localhost:4200/main.3cba2eed50987385fc6b.js:1 invoke http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 run http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 I http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 invokeTask http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 onInvokeTask http://localhost:4200/main.3cba2eed50987385fc6b.js:1 invokeTask http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 runTask http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 g http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 main.3cba2eed50987385fc6b.js:1:232400 Go http://localhost:4200/main.3cba2eed50987385fc6b.js:1 handleError http://localhost:4200/main.3cba2eed50987385fc6b.js:1 tick http://localhost:4200/main.3cba2eed50987385fc6b.js:1 invoke http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 run http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 runOutsideAngular http://localhost:4200/main.3cba2eed50987385fc6b.js:1 tick http://localhost:4200/main.3cba2eed50987385fc6b.js:1 _loadComponent http://localhost:4200/main.3cba2eed50987385fc6b.js:1 bootstrap http://localhost:4200/main.3cba2eed50987385fc6b.js:1 _moduleDoBootstrap http://localhost:4200/main.3cba2eed50987385fc6b.js:1 _moduleDoBootstrap http://localhost:4200/main.3cba2eed50987385fc6b.js:1 i http://localhost:4200/main.3cba2eed50987385fc6b.js:1 invoke http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 onInvoke http://localhost:4200/main.3cba2eed50987385fc6b.js:1 invoke http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 run http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 I http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 invokeTask http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 onInvokeTask http://localhost:4200/main.3cba2eed50987385fc6b.js:1 invokeTask http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 runTask http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 g http://localhost:4200/polyfills.3bfd66addbd0d2814591.js:1 Thanks for any help.

This is pretty much what I have import {CSSPlugin, Elastic, TimelineLite, TweenMax} from 'gsap/all'; const gsapStuff = [CSSPlugin, TweenMax, TimelineLite]; // To prevent tree shaking export class GsapComponent { static animateAvatars() { const tl = new TimelineLite({ paused: true }); if (window.innerWidth >= 720) { tl.to('#avatars', 1, { opacity: 0.2 }); } tl.staggerTo('.chat', 2, { opacity: 1, scale: 1, ease: Elastic.easeOut }, 1); tl.play(); } } When I call this function I'm getting the "i is not a constructor" error that I was showing before when I have build optimizer set to true. When it's set to false everything works fine. I will create an example project and upload it here.

I added the const line and I'm still not seeing CSSPlugin inside my main.js file. So webpack and angular still is doing treeshaking :). But now I know that it is because of tree shaking so I will find a solution. It works after disabling the build optimizer but I don't think that is a good idea. I am only using this plugin in a small part of my project. Any other ideas?

Ok will try it out tomorrow. About the delay, does that add a delay in between each "tween" or just at the beginning? Thanks.

What I'm doing: import {Elastic, TimelineLite} from 'gsap/all'; @ViewChild('proximitySection') proximitySection: ElementRef; proximitySectionPlayed = false; static animateProximity() { const tl = new TimelineLite({ paused: true }); tl.to('#orange-dot', 0.3, { y: '-10%', opacity: 1 }).to('#woman-1', 0.3, { y: '-117%', opacity: 1 }).to('#woman-2', 0.3, { y: '-89%', opacity: 1 }, '-=0.2').to('#woman-3', 0.3, { y: '-31%', opacity: 1 }, '-=0.2'); setTimeout(() => { tl.play(); }, 1000); } @HostListener('window:scroll') checkScroll() { const scrollPosition = window.pageYOffset + window.innerHeight; if (!this.proximitySectionPlayed && this.proximitySection && scrollPosition >= (this.proximitySection.nativeElement.offsetTop + this.hotOrNotSection.nativeElement.offsetHeight)) { IdilysComponent.animateProximity(); } } Explanation: I imported TimelineLite and Elastic normally from `gsap/all`. I am getting the element 'proximitySection' so that when I scroll over it it starts the animation (this part is just angular and has nothing to do with GSAP and its working fine). In dev so if I do `ng serve` everything works correctly. Animations load and play normally no console errors etc. In prod if I do `ng build --prod` I do not get any cli errors at all but when I open the page I get one error. (pasted below). ERROR TypeError: "i is not a constructor" animateProximity main.fdd17250ba3839013596.js:19610 checkScroll main.fdd17250ba3839013596.js:19634 b 8.accefe6708c93440a38e.js:1 handleEvent main.fdd17250ba3839013596.js:18162 handleEvent main.fdd17250ba3839013596.js:18680 Zh main.fdd17250ba3839013596.js:16576 xg main.fdd17250ba3839013596.js:16930 N main.fdd17250ba3839013596.js:36971 invokeTask polyfills.bebee6a5ef0ece001bc6.js:1 onInvokeTask main.fdd17250ba3839013596.js:14821 invokeTask polyfills.bebee6a5ef0ece001bc6.js:1 runTask polyfills.bebee6a5ef0ece001bc6.js:1 invokeTask polyfills.bebee6a5ef0ece001bc6.js:1 m polyfills.bebee6a5ef0ece001bc6.js:1 k polyfills.bebee6a5ef0ece001bc6.js:1 main.fdd17250ba3839013596.js:formatted:14249 Now if I open that file at that position I get this: var r = n('LiCP'), i = r.f.TimelineLite, o = r.f.Elastic; t.animateProximity = function () { var t = new i({ paused: !0 }); t.to('#orange-dot', 0.3, { y: '-10%', opacity: 1 }).to('#woman-1', 0.3, { y: '-117%', opacity: 1 }).to('#woman-2', 0.3, { y: '-89%', opacity: 1 }, '-=0.2').to('#woman-3', 0.3, { y: '-31%', opacity: 1 }, '-=0.2'), setTimeout(function () { t.play() }, 1000) }, It is failing on `var t = new i()` Any idea why the import of TimelineLite is not working on my production build? I did not add anything else to angular.json or anything like that. Thanks.