Jump to content

Search the Community

Showing results for tags 'angular 2'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. 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
  2. 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