[How do I use TimeLineMax in Angular5+ and Typescript]

ok nevermind, I realized I had the cdn script imported in the index.html file and it works now

[How do I use TimeLineMax in Angular5+ and Typescript]

Seeing that I got a working demo now would it be more appropriate to open another topic concerning getting the npm package properly installed on my system or could you guys help with that here?

[How do I use TimeLineMax in Angular5+ and Typescript]

I'm trying to get TimeLineMax to work in my Angular 5 project and can't figure out what's not being done.  I originally installed the npm package available on the gethub page and found this article https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#greensock showing how to use it in the OnInit lifecycle and this stackoverflow post https://stackoverflow.com/questions/37135894/using-tweenmax-in-angular2-project which touches on the issue of gtting it up and working.  So far I imported it into my component like this

 

import { TimeLineMax }      from 'gsap';

 

and just to try it out I have this in my component class.

ngOnInit(){
  this.layerAnimation();
}
    
layerAnimation(){
  let anime: TimeLineMax = new TimeLineMax();
  
  anime.from('.redLayer2', 1, {x: -200, opacity: 0});
  
  return anime;
}

 

Nothing is happening.  I've tried adding it to the main.ts file as originally shown in the article, I tried using the @ViewChild method, switched from using that to an ID to a Class, nothing works. I don't know what else to do and really can't find much info on using this with Angular and Typescript.  Can anyone help shed light on this?

 

UPDATE

 

I created a demo on StackBlitz after fixing the typos with no success and ironically the demo works.  I tried re-installing gsap and the animation still isn't working.

 

https://stackblitz.com/edit/gsap-demo?file=app/app.component.ts

See the Pen app.component.ts by edit (@edit) on CodePen