Version 2.1.2 in Angular 7

[Gabb1995]

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.

[GreenSock]

Hm, that's pretty weird. It sounds like an issue with your build system/bundler, likely related to tree shaking. I would definitely recommend importing CSSPlugin and referencing it somewhere in your code in order to protect it from tree shaking, as mentioned in the docs. 

 

import {Elastic, TimelineLite, CSSPlugin} from 'gsap/all';

const gsapStuff = [CSSPlugin]; //<- just to protect from tree shaking. Add whatever you want here. 

 

Does that resolve things at all? 

 

Oh, and I'd strongly recommend using yPercent:-10 instead of y:"-10%" to prevent ambiguity.

//not as good:
y: '-10%'

//better:
yPercent:-10

 

Oh, and there's no reason for you to use a setTimeout() like that in order to delay the timeline's start by 1 second. All you need to do is add a delay:1 to your TimelineLite constructor vars:

 

const tl = new TimelineLite({ delay:1 });

 

If you're still having trouble, please provide a reduced test case, maybe in codesandbox or something like that. It's just tough to troubleshoot blind.  

[Gabb1995]

Ok will try it out tomorrow.

About the delay, does that add a delay in between each "tween" or just at the beginning?

Thanks.

[Rodrigo]

2 minutes ago, Gabb1995 said:

About the delay, does that add a delay in between each "tween" or just at the beginning?

 

Just the beginning

 

https://greensock.com/docs/TimelineLite

[Gabb1995]

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?

Edited May 3, 2019 by Gabb1995
Found fix

[GreenSock]

Nah, you shouldn't have to disable your build optimizer. Did you try referencing CSSPlugin, TweenMax, and TimelineLite somewhere in your code? 

[Gabb1995]

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.

[Gabb1995]

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.

[GreenSock]

That's pretty strange indeed - have you asked the Angular folks? This doesn't seem like a GSAP issue. 

 

Try adding your gsapStuff as a property of your actual class. I wonder if maybe it sees that gsapStuff is never referenced anywhere, so it dumps it (tree shaking). Just a guess.

[Gabb1995]

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.

[Gabb1995]

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.

[robb]

Its the production optimizer causing the issues. 

 

https://stackoverflow.com/questions/51123831/ng-build-prod-cannot-set-property-autoactivated-of-undefined

 

Two ways to fix this:

In your angular.json file add the uncompressed versions of the files needed.  Let the compiler compress the files.

 

"scripts": [

"node_modules/gsap/src/uncompressed/TimelineLite.js",

"node_modules/gsap/src/uncompressed/plugins/CSSPlugin.js",

"node_modules/gsap/src/uncompressed/plugins/AttrPlugin.js"

],

 

Second, but not recommended, is to set "buildOptimizer" to false.

 

[Gabb1995]

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

[Gabb1995]

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?

[OSUblake]

On 5/16/2019 at 4:26 AM, Gabb1995 said:

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"
                        ],

 

 

You're missing TweenLite.js.

 

 

On 5/16/2019 at 4:26 AM, Gabb1995 said:

and I'm importing these: (I assume Elastic is in EasePack.js)

 

import {Elastic, TimelineLite, CSSPlugin} from 'gsap/all';

 

 

Do not import if you're using scripts.

 

Third Option:

Create your own GSAP bundle (webpack, rollup). There is no law that states that you have to use Angular's build tool for everything.

[Gabb1995]

15 hours ago, OSUblake said:

Do not import if you're using scripts.

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

[OSUblake]

3 hours ago, Gabb1995 said:

If I don't import in my typescript file the build fails immediately.
error TS2304: Cannot find name 'TimelineLite'.

 

You can turn off those errors in a tsconfig file.

[huwllewellyn]

Can someone explain why the gsap library is so hard to get working with typescript? It seems like this problem has been solved by most products and the number of typescript users justifies this being well defined. Or is gsap a library mainly used by non-typescript users for some reason?

[OSUblake]

To be honest, I don't think a lot of TypeScript users know how to use TypeScript. And Angular is not TypeScript. Most of these problems are coming from Angular's build optimizer. It messes the imports up. I don't know what the problem is, but GSAP isn't the only library it affects.

[huwllewellyn]

Yeah, to be fair I am just frustrated at the moment trying to get these libraries to work. But the documentation on this is literally scattered across the forums. It would be nice to have it centralised somewhere. Thanks for the effort you lot do put in. It's a great library.

[OSUblake]

Well what are you having a problem with?

[huwllewellyn]

import { TweenLite } from "gsap";

import Draggable from "gsap/Draggable";

import { Elastic } from "gsap/EasePack";

 

TweenLite imports fine but I am getting errors on Draggable and Elastic (even though they work). I opted to require as a way of avoiding the errors, but it just feels... off

Could not find a declaration file for module 'gsap/EasePack'. '/Users/huwllewellyn/stile-science-iframe-widgets/node_modules/gsap/EasePack.js' implicitly has an 'any' type.
If the 'gsap' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap`

Also, what type is a Draggable onDrag event?

[OSUblake]

The main problem here is that the definitions do not match up with the imports. The definitions need to be updated to handle subfiles, but for the time being just do this.

 

import { TweenLite, Elastic } from "gsap";
import Draggable from "gsap/Draggable";

 

Draggable doesn't have any definitions at the moment, so just declare it for the time being.

 

declare var Draggable;

 

And any callback, like onDrag, is just a function.