[ScrambleText/MorphSVG Plugins with Angular6 and Firebase]

Thank you @OSUblake

 

I am wondering if this would be applicable even if I am executing tweens outside Angular, as you suggested in other forum:

// I tried with and without requestAnimationFrame
ngZone.runOutsideAngular(() => {
  window.requestAnimationFrame(() => {
    this.executeMyTweens()
  });
});

 

 

I am actually testing it in Angular 5 and 6 both separately.

With Angular6, I am using GSAP 2.0.1

With Angular5, I am using GSAP 1.2 

Animations are suffering in Safari for both versions (with or without bundling).

 

Now I am not creating production build as the app is really small and I updated the way I was importing the GSAP as in angular-cli Github instructions.

This actually improved the animations on Firefox.

 

Now, the animations on Firefox are crisp as in Chrome. But on Safari its still the same.

[ScrambleText/MorphSVG Plugins with Angular6 and Firebase]

This is the link to BitBucket Repo.

[ScrambleText/MorphSVG Plugins with Angular6 and Firebase]

So, I had to drop the Morph and ScrambleText plugins.

As they weren't working with gsap 1.20

 

This is the link. The animations work nicely on Chrome, Firefox and Edge

but really dead/stuttering on Safari OSX/iOS and Chrome on iPads.

Any ideas?

[ScrambleText/MorphSVG Plugins with Angular6 and Firebase]

@GreenSock 

Elastic and Back eases are working for gsap 1.20.x with firebase serve

Is there a way to get bonus files for that version?

[ScrambleText/MorphSVG Plugins with Angular6 and Firebase]

@GreenSock Thank you for the quick response!

ScrambleText and MorphSVG Plugins are working now.

 

After updating the plugin imports as you suggested and gsap to 2.0.1

I encountered: Elastic.easeIn/easeOut not found,  so I changed it to Power4.easeIn/easeOut which circled back to same error as mentioned above.

 

On StackBlitz, I created a simple Elastic animation and pulling data/user from Firebase. It works, just like localhost. No issues.

 

Below are the BitBucket repo links. It works nicely with ng serve, but throws errors with firebase serve.

HTTPS

SSH

 

Greatly appreciate your help!

[ScrambleText/MorphSVG Plugins with Angular6 and Firebase]

Hi All,

I am using ScrambleTextPlugin and MorphSVGPlugin in component:

 

import ScrambleTextPlugin from 'gsap/ScrambleTextPlugin';
import MorphSVGPlugin from 'gsap/MorphSVGPlugin';

 

Problem 1: The animation only happens if I console.log the versions of plugins in ngOnInit

 

console.log(ScrambleTextPlugin.version, MorphSVGPlugin.version);

 

 

Problem 2: After deploying the app to firebase, it throws TypeError:

 

Uncaught TypeError: Cannot set property '_autoActivated' of undefined
    at Object.zUnb (main.1c91b1d089cbaf940e97.js:formatted:34594)

/*

In the bundled file (formatted), I found following lines related to _autoActivated :

34135: qh = Yc.f.TweenMax
34593: cp = qh
34594: cp._autoActivated = [Vh, jh, Bh, zh, ap, Uh, Yh, Yc.f.Back, lp, Yc.f.Bounce, Yc.f.RoughEase, Yc.f.SlowMo, Yc.f.SteppedEase, Yc.f.Circ, Yc.f.Expo, up, Yc.f.ExpoScaleEase];
    
*/

 

This is the link to app on Firebase.

 

 

The project runs fine on localhost. Typical Developer Life.

 

 

gsap: ^2.0.0

firebase: ^5.0.4

angularfire2: ^5.0.0-rc.10

@angular/core: ^6.0.3