ScrambleText/MorphSVG Plugins with Angular6 and Firebase

[djohnson 0 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

Welcome to the forums, @djohnson.

 

Please try updating to GSAP 2.0.1. And as for the animations only working if you console.log() the plugin versions, I bet that's because your build process is doing tree shaking and if you don't specifically reference the plugins somewhere in your code, they get dropped from your bundle. Please read https://greensock.com/docs/NPMUsage/

 

The solution there would be to just reference the plugins somewhere in your code, like:

//protect from tree shaking by referencing the plugins
var plugins = [ScrambleTextPlugin, MorphSVGPlugin];

 

If you're still having problems after updating to 2.0.1 and referencing the plugins, please provide a reduced test case (maybe a github repo or StackBlitz project) so that I can reproduce the error on my end. It's just very difficult to troubleshoot blind.

[djohnson 0 Likes (Newbie)]

@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!

[djohnson 0 Likes (Newbie)]

@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?

[djohnson 0 Likes (Newbie)]

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?

[GreenSock 8,117 Likes (Superhero)]

Yeah, something strange is happening there for sure. I see some errors in the console and the render times are nuts. Very difficult to troubleshoot live in the browser with thousands of lines of minified code. Are you able to replicate in BitBucket? I haven't had a lot of time to look at your earlier link yet. 

[djohnson 0 Likes (Newbie)]

This is the link to BitBucket Repo.

[OSUblake 9,990 Likes (Superhero)]

@djohnson we can't test firebase serve as you have to be logged in for that.

 

I just tried the latest version of GSAP (2.0.1) with Angular 6, and it worked fine... that is until I created a production build. I'm pretty sure that's a problem with the Angular CLI. It's doing weird stuff, like not even executing some code. If you search around, you'll find that there are a lot of issues with the latest version of the Angular CLI.

 

If all else fails, just add your scripts to angular.json file.

https://github.com/angular/angular-cli/wiki/stories-global-scripts

 

If Angular is running is slow, it's probably because of how change detection is triggered inside a zone. When an animation is playing, Angular will call ngAfterViewChecked on your components, even if you haven't implemented that method. It does that on every animation frame, which might be happening 60 times/second. That's a lot of extra work!

 

To prevent Angular from doing that, you need to add this line of code in polyfills.ts, right before the zone.js import.

 

// Allow animation frames to run outside zone to improve performance
__Zone_disable_requestAnimationFrame = true;


/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

 

 

[djohnson 0 Likes (Newbie)]

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.

[JoelCollact 0 Likes (Newbie)]

@OSUblake Thank you so much!!!!