djohnson

ShockinglyGreen
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

0 Newbie

About djohnson

  • Rank
    Newbie
  1. djohnson

    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.
  2. djohnson

    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?
  3. djohnson

    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?
  4. djohnson

    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!
  5. 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