Pluralsight blog Where devs, IT admins & creative pros go for news, tips, videos and more.
3,500+ tech & creative courses authored by experts - unlimited & online Get it now →
November 1, 2013

Matias Niemela on the new AngularJS animations API

By

matiasMatias Niemela is responsible for writing the new animations API in AngularJS. We were interested in its background and some of the history and design decisions around ngAnimate, so we decided we’d take some time to chat with Matias and ask him.

Lukas Ruebbelke: Matias, let’s start with a little background first. Tell us a bit about yourself and what you’ve been working on.

Matias Niemela: My name Matias and I live in Toronto, Canada. I’ve worked for nine months on the AngularJS core team remotely from Toronto, and I run and operate the blog yearofmoo.com. Lately I’ve been developing a lot of open-source code on the Angular project and improving my skills as a software engineer. 

Lukas Ruebbelke: What has been your primary focus with AngularJS?

Matias Niemela: Primarily ngAnimate and a new interactive guide application for learning AngularJS.

Lukas Ruebbelke: Who’s idea was it to finally start writing ngAnimate and make it a real thing? 

Matias Niemela: I originally emailed Miško Hevery (one of the original developers on the project, and still active) asking if I could help make animations a real thing and how I could help make new features of AngularJS come to fruition. I also mentioned my blog and who I was. A few weeks later, he replied and let me know he chatted with the team and the opportunity is up for the taking. At first I was going to help improve the docs, however the ngAnimate module was a really sought-after feature in AngularJS so we decided to move on that first. So I guess animations in AngularJS would have been developed with or without me, but I was just at the right place at the right time when I emailed him to kick things into gear.

Lukas Ruebbelke: Tell us about some of the design decisions that went into the new API for version 1.2.

Matias Niemela: At first we incorporated ngAnimate as a directive into AngularJS, and it was also a part of the core. But then as we wanted to extend the functionality of the directive to listen on class-based animations we hit a wall. The coupling between the ng-class and ng-animate attributes were too much, and there was too much redundancy. Extending ng-class to be animation-aware was my idea, however migrating to use CSS classes entirely was a flash of insight from Misko, which made the application of animations more extensive and simplistic. The CSS class-based structure sticks to use CSS transitions/animations by default, however it also supports JavaScript animations as well, so long as they’re defined within the module code. This new approach also made it very easy to port ngAnimate as a separate module within AngularJS and also to decouple animation logic from the HTML template code. Moving to this setup was an excellent move on Angular, but there were a large number of bugs that had to get cleaned up during the early RC stages of 1.2. Things are much better and faster now. 

Lukas Ruebbelke: Moving to a CSS class-based syntax makes it really easy to integrate with third-party libraries. What are some of your favorites ones out there at the moment?

Matias Niemela: The animate.css library is the best choice for CSS animations. Effeckt.css is also actively getting developed, and I have been emailing Chris Coyier (who is working on Effeckt.css) to see if a driver for AngularJS could be developed once the library is complete. Greensock, despite being a JavaScript library, also is easy to use with 1.2 as well as basic JQuery animations.

Lukas Ruebbelke: My experience is that it’s pretty easy to hook ngAnimate into an existing AngularJS application. I realize this may not always be the case, so can you share any design considerations that would be helpful when building an application that is going to be animated?

Matias Niemela: Integrating ngAnimate into an existing application should be quite easy. The CSS classes in AngularJS are explicit enough not to collide with any other styles, but sometimes extra care may be required to make things work, and due to the strict CSS naming conventions, your animations may not appear the first time.

My recommendations for design would be to build your application without animations first, then add them on after things are working. Your application should work the same if ngAnimate is removed from your list of dependencies. If you’re upgrading a pre-existing application, then please migrate your own animation code to use ngAnimate instead of being inline within your directives. Also try to avoid crafting your own animation logic outside of what ngAnimate offers. We’re constantly looking into how to boost the capabilities of ngAnimate, so chances are  what you’re doing on your own is already supported and encouraged within ngAnimate.

Lukas Ruebbelke: AngularJS really excels at doing enterprise CRUD type applications. ngAnimate really opens up the door to go far beyond that. What kind of things are you hoping people do with ngAnimate?

Matias Niemela: We’re hoping to see all kinds of websites and web applications use ngAnimate to build experiences that are not exclusively CRUD and/or enterprise services. Personal blogs, touch interfaces, mobile applications and so on could all benefit from what ngAnimate has to offer. As time goes on we’re hoping that developers use ngAnimate, provide feedback on how to improve its capabilities and share what they like and don’t like. Web animation integration code has always been subject to coupling and complexity and overall it is very difficult to sync animations properly into a web application. So far ngAnimate makes approaching animations much easier. Our goal with it is to provide rich animations without your application turning into spaghetti code. I feel like we’re getting closer to making a really nice common way of handling animations on the web. Who knows, maybe browsers vendors and/or the W3C may end up learning from ngAnimate and plan to develop a more robust animation API for the web.

Lukas Ruebbelke: One last question. And I have to warn you that we have your house surrounded and are not afraid to uses force if your answer is not satisfactory. Tell us something totally top secret about AngularJS that no one else could possibly know.

Matias Niemela: The development of ngAnimate has always been developed one step at a time so there’s nothing top secret in the works. Perhaps soon we’ll have better callback handling and synchronization between animations as well as staggering animations and more drivers for other animation tools. One thing for sure is that if there is a new and useful browser API then AngularJS will find a way to put it to use in the framework. Maybe sometime down the road once the new W3C web animations API is mainstream it will be combined into ngAnimate. Seeing how things have gone in the past nine months, everything new in AngularJS fits together so nicely together so I have no doubts about what’s to come. It really falls back onto the devs working on the framework and open-source. The collective input and creativity of the AngularJS team really shows in their work, and the overall synergy of everyone working together in the community helps make that work really shine.

Lukas Ruebbelke: OK, one more last question. Who is your best friend in the whole wide world?

Matias Niemela: Vim. Is that one going into the interview?

Lukas Ruebbelke: Yes it is!

Matias Niemela: Ok. Rewind!

Lukas Ruebbelke: No, that is awesome! Hilarious answer.

Matias Niemela: My girlfriend, Erika, my three terriers, the colorful gang of mookin cartoons from yearofmoo, whoever runs onehungrymind and my wholesome list of social media followers.

Lukas Ruebbelke: I really appreciate you taking time to answer some questions, and more importantly building something so incredibly awesome!

Matias Niemela: My pleasure. Be sure to thank Brad Green, Misko Hevery, Igor Minar, the remainder of the AngularJS team, as well as the amazing ng community for their never-ending devotion, passion and vision for helping make ngAnimate and AngularJS what it is.

About the Author

is passionately pursuing HTML5, CSS3 and JavaScript. He is also working on AngularJS in Action for Manning Publications. Oh! And he throws programming parties!

Author's Website: http://onehungrymind.com


Discussion