OSUblake

Make Angular Animations Great Again

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

Share this post


Link to post
Share on other sites

OSUBlake/apploud - Is there any headway on this, or is this code available elsewhere? That link is dead.

Share this post


Link to post
Share on other sites

Well that's a shame! That's where I kept all of my Angular demos, and it doesn't look like they were transferred over to codesandbox. :-(

 

MevDQbF.jpg

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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.