Jump to content
Search Community

Make Angular Animations Great Again

OSUblake test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

  • Like 5
Link to comment
Share on other sites

  • 9 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...