Optiq
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Optiq
-
-
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?
-
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
How do I use TimeLineMax in Angular5+ and Typescript
in GSAP
Posted
ok nevermind, I realized I had the cdn script imported in the index.html file and it works now