Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
treadway

Angular & Club Plugins

Recommended Posts

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)

Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This is what I get...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×