Share Posted July 11, 2019 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 More sharing options...
Share Posted July 11, 2019 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. 2 Link to comment Share on other sites More sharing options...
Share Posted July 12, 2019 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 More sharing options...
Author Share Posted July 12, 2019 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! 1 Link to comment Share on other sites More sharing options...
Share Posted July 12, 2019 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 More sharing options...
Author Share Posted July 12, 2019 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 More sharing options...
Share Posted July 12, 2019 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now