AngularJS Tutorial #20 - Animations (part 1)

Yo ninjas, in this AngularJS tutorial, I'll show you how we can 'slick' up our application using angular animations and the ngAnimate module. Angular animations are a seriously quick and easy way to add in cool looking transitions on your elements when they leave and enter your app.

[wikittywhacktv]

Great tutorials man! your channel is criminally underviewed...

[chetanpatil]

no one has explained animation as good as u

[jaimsseuma]

That's an amazing series, Shaun! I'm starting to luv both ninjas and angular :-)
Many thanks.

[henrik]

pretty cool bro gotta learn old AngularJS for new work

[rshmvarma]

perfect! Exactly what I was looking for.

[eaitreinador]

Wow thank you man! I've learned a lot in this tutorial!

[locus]

Please provide the final source file anywhere.

[olliphpsw]

Lol, You have already made angular. I left comment below CSS animations, hahaha. Great! You are awesome. I got my wish at once.

[emberogames]

Really nice. Thanks for the quick animation tutorial :)

[eldinedy]

you are missing that property in .content class in downloaded file

[mickeyvirus]

View animation is working but the li animation isnt working...Any solution for that??

[anish]

The animation effect is not taking place for me when I switch pages i.e from Home to List Ninjas and vice versa. Rest all animation effects are taking place except this one. I can't understand why? Can anyone help me plz??

[luisperezcr]

Hi, dude. I want to play the animation as soon as the "element" (h1, div, whatever) enters in the viewport. How can I do that? Thanks.

[SureshKumar-bjrr]

your tutorial ....really awesome....i subcribed your chennal....

[karatista]

Can anyone provide a link to the entire source code of the app?

[gimo]

If you like that the animation works, downgrade all angular js files to version 1.5!

[stelios-ervispriftis]

Hello guys,
Great animated tutorial but I'm having a problem with my animation when I reload the page, the ninjas starting animate from the form to the left and after appearing to the top and that looks really bad any thoughts why this is happening?
Thanks

[Etheriiss]

I need some help guys. When I put ngAnimte as a dependency it don't work so I've used link from googleapis and now page loads but i have another problem, animations work with views but dont work with this li elements when I remove or add a new ninja, I don't know how to fix this. Will somebody help me please ? Opacity still works even on li elements but transform property didn't work :(

[gauthamkshatriya]

i am php developer looks like i need to use angular for animation