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)