Angular & Club Plugins

[treadway 1 Likes (Newbie)]

Hey y'all,

 

I am trying to get the club plugins (drawSVG & ScrambleText) to work in an Angular app (5.2). GSAP was added with NPM and the plugins were added to an assets folder. I also added the paths in the angular.cli (after some failed tests). There is no error on the plugin import but neither plugin works.

The scrambleText  (#inititalizing) does show a runtime error "invalid scrambleText tween value: [object Object]"

 

I have loaded multiple ways (just in case)

import DrawSVGPlugin from "../../assets/js/gsap/DrawSVGPlugin";
import ScrambleTextPlugin from "../../assets/js/gsap/ScrambleTextPlugin";

//and

import * as DrawSVGPlugin from "../../assets/js/gsap/DrawSVGPlugin";
import * as ScrambleTextPlugin from "../../assets/js/gsap/ScrambleTextPlugin";

 

I have tried set and to & fromTo

I have tried just the id and nativeElement

    TweenMax.set("#line-two", {drawSVG:"0%"});
    TweenMax.to("#line-two", 1, {delay: 5, drawSVG:"100%"});
    TweenMax.fromTo("#line-two", 1, {drawSVG:"0%"}, {delay: 5, drawSVG:"100%"});
    TweenMax.fromTo(this.lineTwo.nativeElement, 1, {drawSVG:"0%"}, {delay: 5, drawSVG:"100%"});

    TweenMax.to("#inititalizing", 3, {scrambleText:{text:"inititalizing...", chars:"10", revealDelay:0.5, speed:0.3}});

    TweenMax.fromTo("#dot", .75, {transformOrigin:"50% 50%", scaleX:0, scaleY:0}, {delay: 5, scaleX:1, scaleY:1});

...Also the simple #dot animation at the end works fine. And all the #line-two are not in the code together at the same time, just all here to display the different tests.

 

Any clue to why these would be failing to animate? (definitely a plugin only issue)

[OSUblake 9,990 Likes (Superhero)]

7 minutes ago, treadway said:

I also added the paths in the angular.cli (after some failed tests).

 

Do you do this?

 

 

Remember to use files that are not modules, so no npm. Just use files from minified or uncompressed folders of your download.

 

[GreenSock 8,117 Likes (Superhero)]

Yeah, and try referencing the plugins somewhere in your code just to prevent your build system from dumping them as a part of its "tree shaking" process. Like:

 

const plugins = [ScrambleTextPlugin, DrawSVGPlugin]; //merely to prevent tree shaking

 

[treadway 1 Likes (Newbie)]

Ahhhh YES! It was Tree Shaking.

 

Ok so adding the desired plugins from  "bonus-for-npm-users" in an assets folder. 

No need for any addition to the angular.cli.

Importing with "import * as DrawSVGPlugin from "..assets folder"" in the component that is is used in and the root component.

And adding "plugins = [ScrambleTextPlugin, DrawSVGPlugin];" to the root component (no "const" as it causes an error).

 

And bingo all is well!

(thought it may be helpful for a list of what worked.)

 

Thanks so much for your help Jack & Blake, Cheers!

[OSUblake 9,990 Likes (Superhero)]

3 hours ago, treadway said:

And adding "plugins = [ScrambleTextPlugin, DrawSVGPlugin];" to the root component (no "const" as it causes an error).

 

That sounds a little odd. What is the error?

 

And are you going to do an Angular optimized build? If so, please test that out as soon as possible.

[treadway 1 Likes (Newbie)]

This is what I get...

ERROR in src/app/app.component.ts(22,3): error TS1248: A class member cannot have the 'const' keyword.

[OSUblake 9,990 Likes (Superhero)]

Oh, I see. That's because you put that line of code inside a class. He meant to put that line directly after your imports.

https://greensock.com/docs/NPMUsage