Search the Community
Showing results for tags 'angular 2'.
-
The animation module for Angular 1 was a game changer, and has since been copied by other libraries like Vue and React. For Angular 2, they decided to take a different approach, and create their animation engine. At one point in time, they were looking at using GSAP, but went with using a declarative syntax with the Web Animations API instead. The end result has been pretty craptastic. Nobody uses it, not even the Angular Material team. So how do you animate state changes like this without using their engine? transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) I didn't know if that was possible using GSAP, but @apploud shared a script with me the other day that can do something similar, allowing you to create animations like this. "fadeIn => fadeOut": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 0 }), "fadeOut => fadeIn": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 1 }) It's just a very basic implementation right now, and needs some work, but it could be really helpful for Angular users who want to use GSAP. I don't have time to work on it, but it would be awesome if somebody else could work on it, and maybe make it into an NPM module. Like I said, it's pretty basic right now, so it's not going to work with wildcard or void states like this. // enter transition "void => *" : () => TweenLite.from(this.element.nativeElement, 1, { autoAlpha: 0 }) // leave transition "* => void" : () => TweenLite.to(this.element.nativeElement, 0, { autoAlpha: 0 }) You can see how it works in this demo. https://www.webpackbin.com/bins/-KlC3WIhC60G0V7Ck5CN
-
Hello there, I trying to animate a div using GSAP on an Angular 2 project created with the CLI, I'm using the latest versions. All seems to be fine, I have a console.log(TweenMax); on click event method that shows the proper TweenMax object structure, I believe this means that GSAP is added fine to the project. I used npm to add GSAP to my project I forgot to mentioned. Like I said, all seems to be fine but the div is not moving. Here is the project in case someone wants to run it and check it out. https://github.com/estebanpadilla/angular2GSAP.git Is there anyone here has experience with angular 2 besides the posts: http://greensock.com/forums/topic/13445-using-gsap-with-angular2/ I already check that post and other linked to this one but I had no luck. Well, I hope someone can help me! Thank you. angular2GSAP.zip